/* notify.css — the question cards other players send (js/notify.js): guild / party invites, join requests, duels, friend
   requests, in the K look of the windows (css/kui.css: cream body, chunky navy outline) with a ring in the kind's colour.
   Sizes in --u like the HUD. */
#ncnote { position: fixed; left: 50%; top: calc(112 * var(--u)); transform: translateX(-50%); z-index: 75; /* (over the windows: answer while one is open) */ display: flex; flex-direction: column;
  align-items: center; gap: calc(10 * var(--u)); pointer-events: none; width: min(calc(470 * var(--u)), calc(100vw - 32px)); }
#ncnote[hidden] { display: none; }
.ncn-on #hud .pn-ask, .ncn-on .pn-ask { display: none !important; } /* (their clocks still run: the cards answer through them) */
.ncn-more { order: 99; pointer-events: none; padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 99px; background: rgba(20, 16, 38, 0.72); color: #f7efdc;
  font: 600 calc(14 * var(--u)) / 1.5 'Mitr', sans-serif; }
.ncn-more[hidden] { display: none; }
.ncn-card { --ring: #74b6ec; --fill: #3b8fdc; position: relative; box-sizing: border-box; width: 100%; pointer-events: auto; display: flex; align-items: center;
  gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); color: var(--ink);
  background: #f7efdc; border: calc(4.5 * var(--u)) solid var(--ink); border-radius: calc(20 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--ring), 0 calc(7 * var(--u)) 0 rgba(0, 0, 0, 0.28), 0 0 calc(22 * var(--u)) rgba(0, 0, 0, 0.32);
  animation: ncnIn 0.22s cubic-bezier(.2, 1.4, .4, 1); overflow: hidden; }
.ncn-card[hidden] { display: none; }
.ncn-card.out { animation: ncnOut 0.18s ease-in forwards; }
@keyframes ncnIn { from { transform: translateY(calc(-24 * var(--u))) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ncnOut { to { transform: translateY(calc(-14 * var(--u))) scale(0.96); opacity: 0; } }
.ncn-card.k-guild { --ring: #b39af0; --fill: #7d5fd8; }
.ncn-card.k-party { --ring: #74b6ec; --fill: #3b8fdc; }
.ncn-card.k-request { --ring: #f2c75c; --fill: #e3a21f; }
.ncn-card.k-duel { --ring: #f39a8e; --fill: #e0525e; }
.ncn-card.k-friend { --ring: #8fd8a2; --fill: #3aa860; }
.ncn-card.k-info { --ring: #d9ccb0; --fill: #9e8f72; }
.ncn-card.info { padding-bottom: calc(14 * var(--u)); }
.ncn-badge { position: relative; flex: none; display: grid; place-items: center; width: calc(66 * var(--u)); height: calc(66 * var(--u)); box-sizing: border-box; overflow: hidden;
  border-radius: 50%; border: calc(3.5 * var(--u)) solid var(--ink); background: radial-gradient(circle at 50% 38%, #fffaf0, #eadcbc 75%); }
.ncn-card.info .ncn-badge { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.ncn-badge img { width: 72%; height: 72%; object-fit: contain; }
.ncn-badge.gem img { width: 100%; height: 100%; }
.ncn-badge.face { background: radial-gradient(circle at 50% 38%, #e9f5ff, #a9d3f6 75%); }
.ncn-badge canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ncn-body { min-width: 0; flex: 1; }
.ncn-kick { font: 700 calc(14 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--fill); letter-spacing: 0.02em; }
.ncn-kick:empty { display: none; }
.ncn-t { font: 500 calc(18.5 * var(--u)) / 1.4 'Mitr', sans-serif; overflow-wrap: anywhere; }
.ncn-t b { font-weight: 700; color: #2f6fb5; }
.ncn-t b.ncn-g { -webkit-text-stroke: calc(0.6 * var(--u)) rgba(42, 36, 53, 0.55); }
.ncn-t small { display: block; font-size: calc(14 * var(--u)); color: #6a6078; }
.ncn-b { display: flex; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); }
.ncn-b .kw-btn { height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(17 * var(--u)); }
.ncn-b .kw-btn[hidden] { display: none; }
.ncn-x { position: absolute; right: calc(8 * var(--u)); top: calc(6 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: #8a7f96; font: 700 calc(24 * var(--u)) / 1 'Mitr', sans-serif; }
.ncn-x:hover { background: #ece2cc; color: var(--ink); }
.ncn-bar { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(6 * var(--u)); height: calc(5 * var(--u)); border-radius: 99px;
  background: #e4d7b9; overflow: hidden; }
.ncn-bar[hidden] { display: none; }
.ncn-bar i { display: block; height: 100%; width: 100%; background: var(--fill); transition: width 0.2s linear; }
.ncn-card.info .ncn-bar { bottom: calc(5 * var(--u)); height: calc(3 * var(--u)); }
html.mob #ncnote { top: calc(150 * var(--u)); }