/* ==========================================================================
   ZeroPvP interaction layer (2026-10-20). Script: assets/js/ui.js.
   Loaded on every page after its other sheets: the site, the plugin docs (gen-docs.js) and
   verify.php. Two things, both asked for by the owner:

   1. The hand cursor on everything a visitor can click. Nothing in the CSS forced the arrow:
      site.js hides the browser's link preview box by taking an internal link's href away while
      the mouse rests on it, and an <a> without an href is not a link to the browser, so the hand
      became the arrow (or the text cursor over words) on every internal link. Selects, summaries
      and the copy chips had no hand either. The rules sit in :where(), so they add the hand and a
      page sheet that says otherwise for one element still wins.
   2. Smooth opening and closing for everything that unfolds or pops up: ui.js animates the
      height of <details> and of panels scripts write; this sheet turns the chevrons, unfolds the
      More menu and the phone menu, and fades the item tooltip in. About 240ms, ease-out with no
      overshoot. Reduced motion: none of it (zp.css also stops every transition). Lite mode: the
      unfolding clip paths are left out, the fades stay. Nothing loops and nothing moves at load.
   ========================================================================== */

:root {
  --ui-dur: 240ms;
  --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* the game's own 10 x 6 pixel arrow, the one the selects use */
  --ui-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h10v2H8v2H6v2H4V4H2V2H0z'/%3E%3C/svg%3E");
}

/* ---------- 1. the cursor ---------- */
:where(
  a[href], a[data-zp-href], button, summary, select,
  label:has(> input[type="checkbox"], > input[type="radio"]),
  input[type="checkbox"], input[type="radio"], input[type="button"], input[type="submit"], input[type="reset"],
  input[type="file"], input[type="color"], input[type="range"], input[type="image"],
  [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"],
  [role="option"], [role="switch"], [role="checkbox"], [role="radio"],
  [onclick], [data-href], [data-zp-copy], .mono-cmd, .zp-cmd[data-copy], .zp-ip, .zp-ipbox, .zp-ipchip, .play-btn,
  .lb-row, .kcard, .seg[data-kit], .seg[data-tier], .pc-hit, [data-skin3d], .mc-sound
) { cursor: pointer; }
/* text fields keep the text cursor, also inside a clickable box */
:where(
  input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"],
  input[type="password"], input[type="number"], textarea, [contenteditable=""], [contenteditable="true"]
) { cursor: text; }
/* switched off: the no-entry sign */
:where(:disabled, [aria-disabled="true"]), :where(:disabled, [aria-disabled="true"]) * { cursor: not-allowed; }

/* ---------- 2. details: the chevron ---------- */
/* While ui.js folds a <details> away it keeps [open] until the end and adds .ui-closing, so the
   chevrons turn back at the start of the fold, not at its end. */
:is(.td-table, .pc-table, .pc-more, details.notes) > summary { display: flex; align-items: center; gap: 10px; list-style: none; }
:is(.td-table, .pc-table, .pc-more, details.notes) > summary::-webkit-details-marker { display: none; }
:is(.td-table, .pc-table, .pc-more, details.notes) > summary::after {
  content: ""; flex: none; width: 10px; height: 6px; background: currentColor;
  -webkit-mask: var(--ui-chev) center / 10px 6px no-repeat; mask: var(--ui-chev) center / 10px 6px no-repeat;
  transition: transform var(--ui-dur) var(--ui-ease);
}
:is(.td-table, .pc-table, .pc-more, details.notes)[open]:not(.ui-closing) > summary::after { transform: rotate(180deg); }

/* the FAQ: its plus becomes the same arrow (the shadow stays on the <i>, the arrow turns inside it) */
body[data-page] .faq-group summary i { width: 10px; height: 6px; transform: none; }
body[data-page] .faq-group summary i::before {
  top: 0; left: 0; width: 10px; height: 6px; background: currentColor;
  -webkit-mask: var(--ui-chev) center / 10px 6px no-repeat; mask: var(--ui-chev) center / 10px 6px no-repeat;
  transition: transform var(--ui-dur) var(--ui-ease);
}
body[data-page] .faq-group summary i::after { display: none; }
body[data-page] .faq-group details[open] > summary i { transform: none; }
body[data-page] .faq-group details[open]:not(.ui-closing) > summary i::before { transform: rotate(180deg); }

/* the rules and the other .zp-acc lists: their own chevron, turned back as the fold starts */
.zp-acc summary::after { transition: transform var(--ui-dur) var(--ui-ease); }
.zp-acc details.ui-closing > summary::after { transform: rotate(45deg); }

/* the leaderboard's row button */
.lb-exp i { transition: transform var(--ui-dur) var(--ui-ease); }

/* ui.js owns the opened leaderboard row's entrance now */
.lb-detail.ui-opening { animation: none; }

/* ---------- 3. the More menu: unfolds down from the bar ---------- */
html:not([data-lite]) .zp-menu {
  clip-path: inset(0 -64px 100% -64px);
  transition: opacity 160ms ease-out, transform 200ms var(--ui-ease), clip-path 200ms var(--ui-ease), visibility 0s linear 200ms;
}
html:not([data-lite]) .zp-more.is-open .zp-menu {
  clip-path: inset(-12px -64px -80px -64px);
  transition: opacity 160ms ease-out, transform var(--ui-dur) var(--ui-ease), clip-path var(--ui-dur) var(--ui-ease), visibility 0s;
}
.zp-more > button svg { transition: transform var(--ui-dur) var(--ui-ease); }

/* ---------- 4. the phone menu: unfolds under the bar, the rows follow ---------- */
html:not([data-lite]) .zp-sheet {
  clip-path: inset(0 0 100% 0);
  transition: opacity 180ms ease-out, clip-path 200ms var(--ui-ease), visibility 0s linear 200ms;
}
html:not([data-lite]) .zp-sheet.is-open {
  clip-path: inset(0);
  transition: opacity 160ms ease-out, clip-path 260ms var(--ui-ease), visibility 0s;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-lite]) .zp-sheet-group a, html:not([data-lite]) .zp-sheet-foot { transform: translate(0, 8px); }
  html:not([data-lite]) .zp-sheet.is-open .zp-sheet-group a, html:not([data-lite]) .zp-sheet.is-open .zp-sheet-foot {
    transition: opacity 200ms ease-out, transform var(--ui-dur) var(--ui-ease), color 120ms ease-out, background-color 120ms ease-out;
    transition-delay: calc(40ms + var(--i, 0) * 16ms);
  }
  html:not([data-lite]) .zp-sheet.is-open .zp-sheet-foot { transition-delay: 160ms; }
}

/* ---------- 5. the item tooltip: fades in, rises 4px ---------- */
.mc-tip {
  opacity: 0; translate: 0 4px;
  transition: opacity 120ms ease-out, translate 160ms var(--ui-ease), visibility 0s linear 120ms;
}
.mc-tip.is-on { opacity: 1; translate: none; transition: opacity 120ms ease-out, translate 160ms var(--ui-ease), visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .zp-menu, .zp-more.is-open .zp-menu, .zp-sheet, .zp-sheet.is-open { clip-path: none !important; }
  .mc-tip { translate: none; }
}