/* ══════════════════════════════════════════════════════════════════════════
   Poker Super League — logged-in app shell.

   Loads on top of `styles.css`. Provides the authenticated top nav (account
   avatar + dropdown), a shared page header, panels, segmented controls and the
   primary action button used across Play, Rankings, FAQ and Account.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────  App nav / account control  ───────────────────────── */
/* Active link: red underline drawn as an absolutely-positioned rule so it never
   changes the link's box height (keeping every item's text on the same level). */
.app-nav .nav-links a { position: relative; }
.app-nav .nav-links a[aria-current="page"] { color: #fff; }
.app-nav .nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  border-radius: 2px; background: var(--psl-red);
}

/* "Play Now" action button — matches the marketing Register button, sits just
   left of the account avatar. */
.nav-play { font-size: 15px; padding: 10px 22px; border-radius: 9px; gap: 6px; }
.nav-play span { font-weight: 800; }

.app-account { position: relative; display: flex; align-items: center; }

.app-avatar {
  display: grid; place-items: center; border-radius: 50%; flex: none;
  color: #fff; font-family: var(--font-heading); font-weight: 700; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.app-avatar.sm { width: 38px; height: 38px; font-size: 18px; }
.app-avatar.lg { width: 46px; height: 46px; font-size: 22px; }

.app-avatar-btn {
  padding: 3px; border-radius: 50%; cursor: pointer; background: transparent;
  border: 0; line-height: 0; box-shadow: 0 0 0 1px var(--color-divider);
  transition: box-shadow .15s, transform .15s;
}
.app-avatar-btn:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--psl-blue) 70%, transparent); }
.app-avatar-btn.is-open { box-shadow: 0 0 0 2px var(--psl-blue); }

/* Dropdown */
.app-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 50;
  width: 268px; padding: 8px; border-radius: 14px;
  background: var(--color-surface); box-shadow: var(--shadow-md);
  animation: app-menu-in .16s ease both;
}
.app-menu[hidden] { display: none; }
@keyframes app-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.app-menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.app-menu-id { min-width: 0; }
.app-menu-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #fff; }
.app-menu-email {
  font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-menu-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 6px 6px; padding: 8px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--psl-blue) 12%, transparent);
}
.app-menu-plan-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.app-menu-plan-value { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #8ed6f2; }

.app-menu-sep { height: 1px; margin: 6px 8px; background: var(--color-divider); }

.app-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--color-text); text-decoration: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  transition: background .13s;
}
.app-menu-item:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }
.app-menu-ic { display: inline-flex; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.app-menu-item.danger { color: #f2909a; }
.app-menu-item.danger:hover { background: color-mix(in srgb, var(--psl-red) 14%, transparent); }
.app-menu-item.danger .app-menu-ic { color: #f2909a; }

/* ─────────────────────────  Shared page header  ───────────────────────── */
.app-header { padding: clamp(40px, 7vw, 72px) 0 8px; }
.app-header .app-h1 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 6vw, 46px); margin: 12px 0 6px; color: #fff;
}
.app-header .app-lede { font-size: clamp(16px, 2.2vw, 18px); max-width: 62ch; margin: 0; }

/* ─────────────────────────  Panels  ───────────────────────── */
.panel {
  background: var(--color-surface); border-radius: 18px; box-shadow: var(--shadow-sm);
  padding: clamp(22px, 3.4vw, 34px);
}
.panel-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.01em; color: #fff; margin: 0; }
.panel-sub { font-size: 14.5px; margin: 6px 0 0; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ─────────────────────────  Segmented control  ───────────────────────── */
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg-btn {
  flex: 1 1 0; min-width: 120px; cursor: pointer; text-align: left;
  padding: 14px 16px; border-radius: 12px; background: var(--color-bg);
  border: 1px solid var(--color-divider); color: var(--color-text);
  font-family: var(--font-body); transition: border-color .14s, background .14s, box-shadow .14s;
}
.seg-btn:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.seg-btn[aria-pressed="true"] {
  border-color: var(--psl-blue);
  box-shadow: 0 0 0 1px var(--psl-blue), 0 0 0 4px color-mix(in srgb, var(--psl-blue) 16%, transparent);
  background: color-mix(in srgb, var(--psl-blue) 10%, var(--color-bg));
}
.seg-btn-label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #fff; }
.seg-btn:disabled { cursor: not-allowed; opacity: .4; }
.seg-btn:disabled:hover { border-color: var(--color-divider); }
.seg-btn-lock { display: inline-block; margin-left: 6px; vertical-align: -2px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* Tier and blind cards: both just a centred word. */
.tier-btn, .blind-btn, .ranked-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 58px; }
.blind-btn .seg-btn-label { font-size: 16px; }

/* ─────────────────────────  Primary / ghost app buttons  ───────────────────────── */
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 13px 26px; border-radius: 11px; border: 1px solid transparent; text-decoration: none;
  transition: filter .15s, background .15s, border-color .15s, opacity .15s;
}
.app-btn.solid { background: var(--psl-red); color: #fff; }
.app-btn.solid:hover { filter: brightness(1.12); color: #fff; }
.app-btn.blue { background: var(--psl-blue); color: #06222f; }
.app-btn.blue:hover { filter: brightness(1.08); color: #06222f; }
.app-btn.ghost { border-color: var(--color-divider); color: var(--color-text); background: transparent; }
.app-btn.ghost:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.app-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

.app-spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: app-spin .7s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────  Confirmation modal  ───────────────────────── */
.app-modal-backdrop {
  position: fixed; inset: 0; z-index: 65; display: grid; place-items: center;
  padding: 24px; background: rgba(6, 7, 12, .74); animation: psl-fade .16s;
}
.app-modal-backdrop[hidden] { display: none; }
.app-modal {
  width: min(460px, 100%); background: var(--color-surface); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 32px); text-align: center;
  animation: app-modal-in .2s ease both;
}
.app-modal-icon {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  color: #f2909a; background: color-mix(in srgb, var(--psl-red) 15%, transparent);
}
.app-modal-title { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.app-modal-body { font-size: 14.5px; line-height: 1.6; margin: 0 0 24px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.app-modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.app-modal-actions .app-btn { flex: 1 1 0; min-width: 150px; }
@keyframes app-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-modal-backdrop, .app-modal { animation: none; } }

/* ─────────────────────────  Confirmation toast  ───────────────────────── */
.app-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 70; max-width: min(560px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 18px; border-radius: 14px;
  background: var(--color-surface); box-shadow: var(--shadow-lg);
  border: 1px solid color-mix(in srgb, #37d391 45%, transparent);
  animation: app-toast-in .28s ease both;
}
.app-toast[hidden] { display: none; }
.app-toast-ic { flex: none; color: #37d391; margin-top: 1px; }
.app-toast-title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #fff; }
.app-toast-body { font-size: 13.5px; margin: 3px 0 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.app-toast-close {
  flex: none; margin-left: 4px; background: transparent; border: 0; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); padding: 2px; line-height: 0;
}
.app-toast-close:hover { color: var(--color-text); }
@keyframes app-toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .app-menu, .app-toast { animation: none; } }

/* ─────────────────────────  Practice badges (medals)  ───────────────────────── */
.psl-medal {
  --medal: #c98a4b; --medal-hi: #f0c08c;
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: #1b1407;
  background: radial-gradient(circle at 32% 28%, var(--medal-hi), var(--medal) 62%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--medal) 55%, #000), 0 4px 12px rgba(0, 0, 0, .45);
}
.psl-medal.silver { --medal: #9ea6b4; --medal-hi: #eef1f6; }
.psl-medal.gold { --medal: #d6a21e; --medal-hi: #ffe79a; }
.psl-medal.locked {
  --medal: #3a3d4b; --medal-hi: #4a4e5e; color: color-mix(in srgb, var(--color-text) 45%, transparent);
  box-shadow: 0 0 0 1px var(--color-divider);
}