/*
 * BetBattles notifications (js/you/notify.js), Party Night style. Owner: YOU.
 *   .nt-bell (.has-new .ring) · .nt-badge .. the app bar bell (home, lobby, results; never game mode), red count
 *   .nt-pop · .nt-caret · .nt-head ........ the desktop dropdown under the bell
 *   .nt-sheet ............................. the phone bottom sheet (ui/sheet.js) · .nt-read = Mark all read
 *   .nt-lv ................................ the level card on top: tier badge, Level N, bar, Claim $X, Rewards ›
 *   .nt-list .nt-item (.is-unread) ........ newest first · .nt-ic per kind · .nt-dot unread · .nt-claim inline Claim
 *   .nt-xp ................................ results: the one quiet "+1,240 XP · Level 14" line
 * Tier colours arrive as an inline --tc (like levels.css); nothing here defines a design token.
 */

/* ---------- the bell ---------- */
.nt-bell {
  position: relative; appearance: none; cursor: pointer; flex: none; padding: 0;
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--night-2); border: 1px solid var(--line-2); color: var(--ink-2);
  transition: border-color .15s, color .15s, transform .1s var(--out);
  -webkit-tap-highlight-color: transparent;
}
.nt-bell::after { content: ""; position: absolute; inset: -3px; }           /* hit area, like the chip's */
.nt-bell:hover, .nt-bell[aria-expanded="true"] { color: var(--ink); border-color: var(--line-3); }
.nt-bell[aria-expanded="true"] { background: var(--night-3); }
.nt-bell:active { transform: translateY(2px); }
.nt-bell.has-new { color: var(--ink); }
.nt-bell svg { transform-origin: 50% 14%; }
.nt-badge {
  position: absolute; top: -7px; right: -7px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--hot); color: #fff;
  font: 900 11.5px/1 var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  box-shadow: 0 0 0 2.5px var(--night-0);
  pointer-events: none;
}
.nt-badge[hidden] { display: none; }
.nt-bell.ring svg { animation: ntRing .9s var(--out); }
.nt-bell.ring .nt-badge { animation: ntPop .5s var(--spring); }
@keyframes ntRing {
  0%, 100% { transform: none; } 12% { transform: rotate(17deg); } 26% { transform: rotate(-15deg); }
  40% { transform: rotate(10deg); } 54% { transform: rotate(-6deg); } 68% { transform: rotate(3deg); }
}
@keyframes ntPop { 0% { transform: scale(.2); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nt-bell.ring svg, .nt-bell.ring .nt-badge { animation: none; } }

@media (max-width: 700px) {
  .nt-bell { width: 40px; height: 40px; border-radius: 13px; }
  .nt-bell svg { width: 21px; height: 21px; }
}
/* phones: the logo is just the Grape Chipper (as in game mode), so the bell, wallet and chip all keep their room */
@media (max-width: 480px) { .bar-in:has(.nt-bell) .wordmark { display: none; } }
@media (max-width: 380px) {
  .bar-in:has(.nt-bell) .bar-right { gap: 10px; }
  .bar-in:has(.nt-bell) .me-av { display: grid; }
}

/* ---------- the panel: desktop dropdown ---------- */
.nt-pop {
  --cx: 90%;
  position: fixed; z-index: var(--z-menu); width: 392px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  border-radius: 24px; outline: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%), var(--night-1);
  border: 1px solid var(--line-3);
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, .9);
  transform-origin: var(--cx) 0;
  animation: ntIn .22s var(--out) both;
}
.nt-pop.leave { animation: ntOut .16s var(--out) forwards; pointer-events: none; }
@keyframes ntIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes ntOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.nt-caret {
  position: absolute; top: -7px; left: calc(var(--cx) - 7px); width: 13px; height: 13px; transform: rotate(45deg);
  background: color-mix(in srgb, #fff 5%, var(--night-1));
  border-left: 1px solid var(--line-3); border-top: 1px solid var(--line-3); border-top-left-radius: 3px;
}
.nt-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 8px 20px; }
.nt-title { margin: 0; font: 800 17px/1.2 var(--f-display); letter-spacing: -.02em; }
.nt-pop .nt-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 14px; }

/* Mark all read (dropdown header, or the sheet header next to the close button) */
.nt-read {
  appearance: none; border: 0; background: none; cursor: pointer; flex: none;
  min-height: 36px; padding: 0 10px; border-radius: 10px;
  font: 800 13.5px/1 var(--f-ui); color: var(--grape-ink); white-space: nowrap;
}
.nt-read:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.nt-read:disabled { color: var(--ink-3); opacity: .6; cursor: default; background: none; }

/* ---------- the panel: phone sheet ---------- */
.nt-sheet .sheet-head .nt-read { margin-left: auto; min-height: 44px; font-size: 14px; }
.nt-sheet .sheet-body { padding: 4px 12px 20px; }

/* ---------- the level card ---------- */
.nt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.nt-lv {
  --tc: var(--gold);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 12px 14px 12px 12px; border-radius: 18px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--tc) 20%, transparent), transparent 70%), var(--night-2);
  border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line));
}
.nt-lv-badge { display: grid; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.nt-lv-main { min-width: 0; display: grid; gap: 7px; }
.nt-lv-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nt-lv-n { font: 800 18px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.nt-lv-tier {
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  font: 800 12px/1 var(--f-ui); color: color-mix(in srgb, var(--tc) 78%, #fff);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
}
.nt-lv-link {
  margin-left: auto; appearance: none; border: 0; background: none; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 2px 0 8px; border-radius: 10px;
  font: 800 13.5px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap;
}
.nt-lv-link:hover { color: var(--ink); }
.nt-lv-bar { height: 8px; border-radius: 99px; background: var(--night-0); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); overflow: hidden; }
.nt-lv-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 65%), var(--tc);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 50%, transparent);
}
.nt-lv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; }
.nt-lv-foot small { min-width: 0; font: 700 12.5px/1.25 var(--f-ui); color: var(--ink-3); }
.nt-lv-claim { flex: none; }
.nt-lv-claim svg { width: 16px; height: 16px; }

/* ---------- the list ---------- */
.nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nt-list[hidden] { display: none; }
.nt-item {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 9px 10px 9px 18px; border-radius: 14px;
  transition: background-color .25s;
}
.nt-item.is-unread { background: rgba(123, 97, 255, .08); }
.nt-item.is-new { animation: feedIn .4s var(--out) both; }
.nt-dot {
  position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--grape); box-shadow: 0 0 8px rgba(123, 97, 255, .7);
  opacity: 0; transition: opacity .25s;
}
.nt-item.is-unread .nt-dot { opacity: 1; }
.nt-item.is-reading { background: transparent; }
.nt-item.is-reading .nt-dot { opacity: 0; }
/* a new tier: its own special row, in the tier's colour */
.nt-item.k-tier { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 15%, transparent), transparent 85%); }

.nt-ic {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--night-3); color: var(--ink-2);
}
.nt-ic svg { width: 18px; height: 18px; }
.nt-ic.tone-go { background: var(--go-soft); color: var(--go); }
.nt-ic.tone-gold { background: var(--gold-soft); color: var(--gold); }
/* a level-up: the new level in your tier's colour, like the pip on your chip */
.nt-ic-lv {
  --tc: var(--gold);
  background: color-mix(in srgb, var(--tc) 17%, transparent); color: color-mix(in srgb, var(--tc) 76%, #fff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 45%, transparent);
  font: 900 14px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.nt-ic-lv.is-3 { font-size: 11.5px; }
.nt-ic-tier { background: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.nt-ic-tier svg { width: 34px; height: 34px; }

.nt-what { min-width: 0; }
.nt-what b { display: block; font: 800 14.5px/1.25 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.nt-what small { display: block; margin-top: 3px; font: 600 12.5px/1.35 var(--f-ui); color: var(--ink-3); }
.nt-claim { flex: none; }

.nt-empty { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 26px 0 18px; text-align: center; }
.nt-empty[hidden] { display: none; }
.nt-empty svg { width: 26px; height: 26px; color: var(--ink-3); opacity: .8; }
.nt-empty b { font: 800 15px/1.3 var(--f-ui); color: var(--ink-2); }

/* phones: every tap target in the panel is at least 44px */
@media (max-width: 700px) {
  .nt-lv-link { min-height: 44px; }
  .nt-claim, .nt-lv-claim { height: 44px; padding: 0 14px; font-size: 14.5px; }
  .nt-item { min-height: 64px; }
}

/* ---------- results: the one quiet line ---------- */
.nt-xp {
  --tc: var(--ink-3);
  margin: 10px auto 0; max-width: 720px; text-align: center;
  font: 700 13.5px/1.3 var(--f-ui); color: var(--ink-3);
}
.nt-xp b { font-weight: 800; color: var(--ink-2); }
.nt-xp span { font-weight: 800; color: color-mix(in srgb, var(--tc) 72%, #fff); }