/* NAPKINART_MENU_COMPETITION_LINES_V7_START */

/*
 * Final four-item center menu:
 *   Feed           Competitions
 *   Friends        Profile
 *
 * Draw and Rankings still exist as pages, but no longer occupy the radial menu.
 */
.center-nav {
  --napkin-v7-menu-x: clamp(92px, 28vw, 108px);
  --napkin-v7-menu-y-top: -84px;
  --napkin-v7-menu-y-bottom: 66px;
}

.center-nav[open] {
  bottom: calc(148px + env(safe-area-inset-bottom)) !important;
}

.center-nav[open] .center-nav-orbit {
  left: 42px !important;
  top: 42px !important;
  z-index: 4 !important;
}

.center-nav .center-nav-item {
  left: -52px !important;
  top: -34px !important;
  width: 104px !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, .99) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .98) !important;
}

.center-nav .item-feed {
  --x: calc(0px - var(--napkin-v7-menu-x)) !important;
  --y: var(--napkin-v7-menu-y-top) !important;
}
.center-nav .item-competitions {
  --x: var(--napkin-v7-menu-x) !important;
  --y: var(--napkin-v7-menu-y-top) !important;
}
.center-nav .item-friends {
  --x: calc(0px - var(--napkin-v7-menu-x)) !important;
  --y: var(--napkin-v7-menu-y-bottom) !important;
}
.center-nav .item-profile {
  --x: var(--napkin-v7-menu-x) !important;
  --y: var(--napkin-v7-menu-y-bottom) !important;
}

/* Never allow retired options to reappear from older injected markup. */
.center-nav .item-draw,
.center-nav .item-rankings,
.center-nav .item-notifications,
.center-nav .item-logout {
  display: none !important;
}

.center-nav[open] .center-nav-item {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.center-nav .center-nav-bubble {
  width: 60px !important;
  height: 60px !important;
  color: #fffaf3 !important;
  border: 1px solid rgba(255, 206, 139, .24) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(31, 29, 28, .99), rgba(9, 9, 10, .995)) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .11) !important;
}

.center-nav .center-nav-item.active .center-nav-bubble,
.center-nav .center-nav-item:hover .center-nav-bubble,
.center-nav .center-nav-item:focus-visible .center-nav-bubble {
  color: #fff !important;
  border-color: rgba(255, 231, 185, .58) !important;
  background: linear-gradient(145deg, #ffb52f 0%, #ff9217 48%, #ff6558 100%) !important;
  box-shadow:
    0 17px 38px rgba(255, 119, 29, .44),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.center-nav .center-nav-toggle {
  width: 84px !important;
  height: 84px !important;
  color: #fff !important;
  border-color: rgba(255, 224, 170, .38) !important;
  background:
    radial-gradient(circle at 50% 27%, rgba(255,226,153,.99) 0%, rgba(255,158,24,.99) 41%, rgba(255,98,80,.99) 69%, rgba(92,31,8,1) 100%) !important;
  box-shadow:
    0 20px 46px rgba(255,126,31,.46),
    0 8px 19px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -12px 20px rgba(118,41,7,.56) !important;
  z-index: 5 !important;
}

/* Replace the overly tall older menu stage with a compact black-glass panel. */
.center-nav[open]::before {
  display: none !important;
  content: none !important;
}

.center-nav[open] .center-nav-backdrop {
  display: block !important;
  background:
    radial-gradient(circle at 50% 83%, rgba(255, 132, 28, .11), transparent 35%),
    rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(3px) brightness(.72) saturate(.86) !important;
  -webkit-backdrop-filter: blur(3px) brightness(.72) saturate(.86) !important;
}

.center-nav[open] .center-nav-backdrop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(390px, calc(100vw - 14px));
  height: 334px;
  transform: translateX(-50%);
  pointer-events: none;
  border: 1px solid rgba(255, 195, 120, .10);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 128, 24, .13), transparent 31%),
    linear-gradient(180deg, rgba(28, 25, 23, .975), rgba(8, 8, 10, .993) 58%, rgba(2, 2, 4, .998));
  box-shadow:
    0 -18px 48px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
}

/* Header alerts remain available from Profile, not the page header. */
.topbar .live-chip,
.topbar .topbar-actions,
.topbar [data-action="open-notifications"],
header .live-chip,
header [data-action="open-notifications"],
[data-napkin-top-live],
[data-napkin-top-notifications] {
  display: none !important;
}

/* ---------- Competition collection lines ---------- */
.napkin-competition-lines {
  display: grid;
  gap: 11px;
}

.napkin-competition-line {
  width: 100%;
  min-height: 100px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 10px 12px 10px 10px;
  border: 1px solid rgba(255, 183, 91, .18);
  border-radius: 18px;
  color: #fff7ec;
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(circle at 98% 0, rgba(255, 144, 28, .12), transparent 32%),
    linear-gradient(180deg, rgba(34, 29, 25, .985), rgba(18, 16, 14, .995));
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.napkin-competition-line:hover,
.napkin-competition-line:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 177, 72, .38);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 148, 28, .08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.napkin-competition-line-preview {
  position: relative;
  width: 94px;
  height: 76px;
  border-radius: 13px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 155, 29, .12), rgba(255,255,255,.02)),
    #100f0e;
  border: 1px solid rgba(255,255,255,.07);
}

.napkin-competition-line-preview img {
  position: absolute;
  top: 7px;
  width: 58px;
  height: 62px;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
  border: 2px solid rgba(19, 16, 14, .88);
  box-shadow: 0 7px 16px rgba(0,0,0,.34);
}
.napkin-competition-line-preview img:nth-child(1) { left: 6px; z-index: 3; }
.napkin-competition-line-preview img:nth-child(2) { left: 28px; z-index: 2; opacity: .9; }
.napkin-competition-line-preview img:nth-child(3) { left: 48px; z-index: 1; opacity: .78; }

.napkin-competition-line-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #ffb44d;
}
.napkin-competition-line-placeholder svg { width: 31px !important; height: 31px !important; }

.napkin-competition-line-copy { min-width: 0; }
.napkin-competition-line-kicker {
  display: block;
  margin-bottom: 3px;
  color: #f4a43a;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.napkin-competition-line-title {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.15;
}
.napkin-competition-line-subtitle {
  display: block;
  margin-top: 4px;
  color: #c4bbb1;
  font-size: .78rem;
  line-height: 1.3;
}

.napkin-competition-line-side {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: #aFA59b;
  font-size: .72rem;
  white-space: nowrap;
}
.napkin-competition-line-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: #211100;
  background: linear-gradient(135deg, #ffc35f, #ff9514);
  font-weight: 900;
}
.napkin-competition-line-chevron {
  color: #ffad3b;
  font-size: 1.3rem;
  line-height: 1;
}

.napkin-competition-collection-head {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255, 181, 83, .16);
  background: rgba(255,255,255,.035);
}
.napkin-competition-collection-back {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.napkin-competition-collection-head small {
  display: block;
  color: #f0a33c;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.napkin-competition-collection-head h2 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 1.05rem;
}
.napkin-competition-collection-head .count {
  color: #d0c5b9;
  font-size: .75rem;
  white-space: nowrap;
}

@media (max-width: 390px) {
  .center-nav {
    --napkin-v7-menu-x: 91px;
    --napkin-v7-menu-y-top: -80px;
    --napkin-v7-menu-y-bottom: 61px;
  }
  .center-nav .center-nav-item {
    width: 96px !important;
    left: -48px !important;
    font-size: 10.8px !important;
  }
  .center-nav[open] .center-nav-backdrop::after {
    width: calc(100vw - 8px);
    height: 318px;
  }
  .napkin-competition-line {
    grid-template-columns: 82px minmax(0,1fr) auto;
    min-height: 94px;
    gap: 10px;
  }
  .napkin-competition-line-preview {
    width: 82px;
    height: 70px;
  }
  .napkin-competition-line-preview img {
    width: 51px;
    height: 56px;
  }
  .napkin-competition-line-side .timing { display: none; }
}

@media (max-height: 690px) {
  .center-nav[open] {
    bottom: calc(136px + env(safe-area-inset-bottom)) !important;
  }
  .center-nav[open] .center-nav-backdrop::after {
    height: 306px;
  }
}

/* NAPKINART_MENU_COMPETITION_LINES_V7_END */