/* NightVisual ClickGUI — Events page (EventsPanel.java), Cosmetics window (CosmeticsScreen.java) and fixes. */

/* ---------- No hidden scrolling ----------
   overflow:hidden boxes can still be scrolled by the browser when a focused button sits outside them,
   which made the window jump up on clicks. overflow:clip cuts the same way but never scrolls. */
.cg, .cg-cos, .cg-content, .cg-stage, .cg-stage__inner { overflow: clip; }
.cg-scroll, .cos-list { overflow-anchor: none; }
/* The site sets "* { scroll-behavior: smooth }": inside the GUI scrolling must be instant, like in the client. */
.cg, .cg * { scroll-behavior: auto !important; }
@supports (zoom: 2) {
  .cg-cos .cos-win { zoom: .625; transform: none; left: 84.48px; }
  .cg-cos:not(.is-open) .cos-win { transform: translateY(16px) scale(.96); }
}

/* ---------- Sidebar: custom logo (InterfaceModule custom logo, circle) and skin-head avatar ---------- */
.cg-logo--custom img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.cg-avatar img.is-pixel { image-rendering: pixelated; }

/* ---------- Slider (SliderElement.java) ---------- */
.cg-bar__fill { width: calc(var(--s, 0) * 100%); }
.cg-bar__knob {
  margin: -3.25px 0 0 0;
  left: clamp(-1px, calc(var(--s, 0) * 100% - 3.25px), calc(100% - 5.5px));
  transition: transform .12s ease;
  will-change: auto;
}
.cg-el--slider:hover .cg-bar__knob { transform: scale(1.08); }
.cg-el--slider.is-drag .cg-bar__knob { transform: scale(1.15); }

/* ---------- Fixes ---------- */
.cg-nav .cg-nav__check { left: auto; right: 6px; top: 3.5px; }
.cg-avatar { overflow: hidden; }
.cg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Events ---------- */
.cg-evbar, .cg-evfilters { display: flex; align-items: center; gap: 6px; }
.cg-evbar { height: 18px; margin-bottom: 8px; }
.cg-evfilters { height: 18px; margin-bottom: 10px; }
.cg-evfilters .cg-seg { margin-right: 4px; }
.cg-grow { flex: 1; }
.cg-seg { display: inline-flex; height: 18px; padding: 2px; border-radius: 7px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.06); }
.cg-seg__b { height: 14px; padding: 0 8px; border-radius: 5.5px; display: inline-flex; align-items: center; gap: 3.5px; font-size: 7.5px; color: var(--dim); transition: background-color .16s, color .16s; }
.cg-seg__b .cg-ic { width: 7.5px; height: 7.5px; }
.cg-seg__b:hover { background: rgba(255,255,255,.05); color: color-mix(in srgb, var(--dim) 40%, var(--text)); }
.cg-seg__b.is-active { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--gA) 85%, transparent), color-mix(in srgb, var(--gB) 85%, transparent)); }
.cg-pill { height: 16px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 7px; color: var(--dim);
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.06); transition: background-color .16s, color .16s, box-shadow .16s; }
.cg-pill:hover { background: rgba(255,255,255,.06); color: color-mix(in srgb, var(--dim) 40%, var(--text)); }
.cg-pill.is-active { color: var(--text); background: color-mix(in srgb, var(--acc) 22%, transparent); box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--acc) 80%, transparent); }
.cg-pill i { width: 4px; height: 4px; border-radius: 2px; }
.cg-evbtn { height: 18px; }
.cg-evstatus { font-size: 6.5px; font-weight: 400; color: var(--faint); white-space: nowrap; }
.cg-evgrid { display: grid; grid-template-columns: repeat(2, 238px); gap: 8px; }
.cg-evc { position: relative; height: 46px; border-radius: 8px; padding: 7px 42px 0 15px;
  background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.06); transition: background-color .16s, box-shadow .16s; }
.cg-evc:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--ea) 42%, rgba(255,255,255,.06)); }
.cg-evc__bar { position: absolute; left: 6px; top: 9px; bottom: 9px; width: 2px; border-radius: 1px; background: var(--ea); opacity: .9; }
.cg-evc__title { display: flex; align-items: center; gap: 6px; height: 11px; }
.cg-evc__title b { font-weight: 600; font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-evc__badge { flex: none; height: 11px; padding: 0 5px; border-radius: 5.5px; font-size: 6px; line-height: 11px; color: var(--ea); background: color-mix(in srgb, var(--ea) 16%, transparent); }
.cg-evc__line { margin-top: 2px; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-evc__line i { font-style: normal; color: var(--faint); margin: 0 4px; }
.cg-evc__detail { margin-top: 3px; display: flex; align-items: center; gap: 3px; font-size: 6.5px; font-weight: 400; color: var(--faint); white-space: nowrap; overflow: hidden; transition: color .16s; }
.cg-evc:hover .cg-evc__detail { color: var(--dim); }
.cg-evc__detail .cg-ic { width: 6.5px; height: 6.5px; }
.cg-evc__detail span { overflow: hidden; text-overflow: ellipsis; }
.cg-evc__join { position: absolute; right: 10px; top: 12px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--accB); transition: background-color .16s, color .16s; }
.cg-evc__join .cg-ic { width: 9px; height: 9px; }
.cg-evc__join:hover { background: color-mix(in srgb, var(--acc) 64%, transparent); color: #fff; }
.cg-evempty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 50px; font-size: 8px; color: var(--dim); }
.cg-evempty .cg-ic { width: 18px; height: 18px; color: var(--faint); opacity: .8; }

/* ---------- Cosmetics window (design 855 × 627, scaled into the GUI) ---------- */
.cg-cos { position: absolute; inset: 0; z-index: 45; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .22s ease; border-radius: 14px; }
.cg-cos.is-open { opacity: 1; pointer-events: auto; }
.cos-win {
  --c-accent: var(--acc);
  position: absolute; left: 52.8px; top: 0; width: 855px; height: 627px; transform: scale(.625); transform-origin: 0 0;
  border-radius: 20px; background: rgba(18,18,20,.93); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.03), 0 0 30px rgba(0,0,0,.25);
  font-weight: 500; color: #fff; transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.cg-cos:not(.is-open) .cos-win { transform: scale(.6) translateY(10px); }
.cos-accent { color: var(--c-accent) !important; }
.cos-head { position: absolute; left: 0; right: 0; top: 0; height: 54px; border-bottom: 1px solid rgba(217,217,217,.07); display: flex; align-items: center; gap: 6px; padding-left: 21px; font-size: 13px; }
.cos-head .cg-ic { width: 12px; height: 12px; }
.cos-head b { font-weight: 500; margin-right: 15px; }
.cos-head span { color: rgba(255,255,255,.4); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 640px; }
.cos-close { position: absolute; right: 16px; top: 14px; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.04); color: rgba(235,237,243,.45); transition: background-color .16s, color .16s; }
.cos-close:hover { background: rgba(255,255,255,.067); color: #fff; }
.cos-close .cg-ic { width: 8px; height: 8px; }
.cos-page { position: absolute; left: 42px; right: 35px; top: 82px; height: 20px; display: flex; align-items: center; gap: 11px; }
.cos-page .cg-ic { width: 14px; height: 14px; }
.cos-page b { font-weight: 500; font-size: 15px; }
.cos-page span { margin-left: auto; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.4); }
.cos-tabs { position: absolute; left: 42px; right: 35px; top: 118px; height: 30px; display: flex; align-items: center; gap: 8px; }
.cos-tab, .cos-ctl { height: 30px; border-radius: 15px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.5); transition: background-color .18s, color .18s, box-shadow .18s; }
.cos-tab { padding: 0 13px; }
.cos-tab .cg-ic { width: 12px; height: 12px; color: rgba(235,237,243,.45); }
.cos-tab:hover { background: rgba(255,255,255,.067); }
.cos-tab.is-active { color: #fff; background: color-mix(in srgb, var(--c-accent) 16%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c-accent) 55%, transparent); }
.cos-tab.is-active .cg-ic { color: var(--c-accent); }
.cos-ctl { width: 30px; justify-content: center; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.07); color: rgba(235,237,243,.45); }
.cos-ctl .cg-ic { width: 13px; height: 13px; }
.cos-ctl:hover { background: rgba(255,255,255,.067); color: #fff; }
.cos-ctl--text { width: auto; padding: 0 15px; font-size: 12px; color: rgba(255,255,255,.5); }
.cos-ctl--text.is-on { color: #fff; }
.cos-body { position: absolute; left: 42px; right: 35px; top: 164px; bottom: 33px; display: flex; gap: 18px; }
.cos-list { width: 440px; flex: none; overflow-y: auto; scrollbar-width: none; }
.cos-list::-webkit-scrollbar { display: none; }
.cos-sec { height: 34px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.8); }
.cos-sec span { font-size: 11px; color: rgba(255,255,255,.3); font-weight: 400; }
.cos-grid { display: grid; grid-template-columns: repeat(3, 138.6667px); gap: 12px; padding-bottom: 12px; }
.cos-card { position: relative; height: 134px; border-radius: 14px; background: rgba(18,18,20,.2); box-shadow: inset 0 0 0 .5px rgba(217,217,217,.19); transition: background-color .2s, box-shadow .2s; }
.cos-card:hover { background: rgba(255,255,255,.067); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.cos-card.is-selected { box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--c-accent) 50%, transparent); }
.cos-card.is-applied { box-shadow: inset 0 0 0 .8px var(--c-accent); }
.cos-thumb { position: absolute; left: 8px; top: 8px; width: 122.6667px; height: 96px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); display: grid; place-items: center; transition: transform .25s ease; }
.cos-card:hover .cos-thumb { transform: scale(1.05); }
.cos-thumb img { max-width: 80%; max-height: 80%; image-rendering: pixelated; }
.cos-thumb.is-cape img { height: 84px; width: auto; max-width: none; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.cos-check { position: absolute; right: 22px; top: 14px; width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; background: var(--c-accent); color: #fff; }
.cos-check .cg-ic { width: 7px; height: 7px; }
.cos-card__name { position: absolute; left: 8px; right: 8px; bottom: 12px; text-align: center; font-size: 11px; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.cos-card:hover .cos-card__name { color: #fff; }
.cos-card.is-applied .cos-card__name { color: var(--c-accent); }
.cos-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.cos-empty .cg-ic { width: 26px; height: 26px; color: rgba(255,255,255,.3); margin-bottom: 4px; }
.cos-empty b { font-weight: 500; font-size: 13px; color: rgba(255,255,255,.8); }
.cos-empty span { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.4); }
.cos-preview { position: relative; flex: 1; border-radius: 16px; background: rgba(18,18,20,.2); box-shadow: inset 0 0 0 .5px rgba(217,217,217,.1); }
.cos-model { position: absolute; left: 35px; right: 35px; top: 24px; height: 250px; display: grid; place-items: center; }
.cos-model img { max-width: 70%; max-height: 90%; image-rendering: pixelated; animation: cosFloat 3.5s ease-in-out infinite alternate; }
.cos-model img.is-cape { height: 220px; width: auto; max-width: none; border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
@keyframes cosFloat { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(4px) rotate(2deg); } }
.cos-model__ph .cg-ic { width: 60px; height: 60px; color: rgba(255,255,255,.08); }
.cos-caption { position: absolute; left: 0; right: 0; top: 290px; text-align: center; }
.cos-caption b { display: block; font-weight: 500; font-size: 14px; }
.cos-caption span { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.4); }
.cos-tip { position: absolute; left: 0; right: 0; top: 340px; text-align: center; font-size: 10px; font-weight: 400; color: rgba(255,255,255,.3); }
.cos-equip { position: absolute; left: 28px; right: 28px; bottom: 18px; height: 40px; border-radius: 20px; font-size: 13px; color: #fff; background: var(--c-accent); transition: filter .16s, opacity .16s; }
.cos-equip:hover { filter: brightness(1.12); }
.cos-equip.is-disabled { opacity: .35; pointer-events: none; }

/* In the client the ClickGUI closes when the wardrobe opens. */
.cg.cos-open { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cg.cos-open > :not(.cg-cos) { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.cg.cos-open .cg-cos { background: transparent; }
.cg > :not(.cg-cos) { transition: opacity .2s ease; }

/* CosmeticsScreen.drawPlaceholder */
.cos-ph { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.cos-ph b { width: 46%; aspect-ratio: 1; max-width: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 18px; color: rgba(255,255,255,.92);
  background: hsl(var(--h) 45% 50% / .85); margin-top: -6%; }
.cos-ph .cg-ic { width: 15px; height: 15px; color: rgba(255,255,255,.22); }
.cos-model .cos-ph b { max-width: 120px; width: 120px; font-size: 46px; }
.cos-model .cos-ph .cg-ic { width: 26px; height: 26px; }
/* CosmeticsScreen: inner panel (94,67 · 821×546), section headers with count and divider, preview reset + status */
.cos-panel { position: absolute; left: 21px; top: 67px; width: 821px; height: 546px; border-radius: 18px; background: rgba(18,18,20,.2); box-shadow: inset 0 0 0 .5px rgba(217,217,217,.1); pointer-events: none; }
.cos-sec { justify-content: space-between; height: 34px; padding-top: 2px; margin-right: 2px; border-bottom: 1px solid rgba(217,217,217,.07); margin-bottom: 12px; }
.cos-sec b { font-weight: 500; font-size: 13px; color: rgba(255,255,255,.8); }
.cos-sec span { font-size: 11px; color: rgba(255,255,255,.4); }
.cos-equip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cos-equip .cg-ic { width: 13px; height: 13px; }
.cos-reset { position: absolute; right: 14px; top: 14px; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; z-index: 2;
  background: rgba(255,255,255,.04); color: rgba(235,237,243,.45); opacity: 0; pointer-events: none; transition: opacity .2s, background-color .16s, color .16s; }
.cos-reset.is-visible { opacity: 1; pointer-events: auto; }
.cos-reset:hover { background: rgba(255,255,255,.067); color: #fff; }
.cos-reset .cg-ic { width: 11px; height: 11px; }
.cos-preview .cos-tip { top: 284px; }
.cos-preview .cos-caption { top: 304px; }
.cos-status { position: absolute; left: 0; right: 0; top: 348px; text-align: center; font-size: 11px; font-weight: 500; min-height: 14px; }
.cos-status.is-ok { color: #60d68c; }
.cos-status.is-bad { color: #ec5860; }
.cos-model--3d { left: 8px; right: 8px; top: 8px; height: 274px; display: block; cursor: grab; border-radius: 12px; overflow: hidden; background: #141416; }
/* Solid panels: in the client the window sits over the game; on the site the grain background would show through. */
.cg-cos .cos-win { background: #121214; }
.cg-cos .cos-preview { background: #141416; }
.cos-model--3d:active { cursor: grabbing; }
.cos3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cos-thumb img.is-render { max-width: 92%; max-height: 92%; image-rendering: auto; }
.cos-thumb img:not(.is-cape) { max-width: 78%; max-height: 92%; image-rendering: auto; }
.cos-model img:not(.is-cape) { image-rendering: auto; max-width: 85%; max-height: 100%; }