/* ═══════════════════════════════════════════════════════════════════════
   world-player-menu.css — the player menu: Block and Mute (GH #3222, S2),
   and the report sheet it turns into (S3).

   tasks/prd-moderation.md §3.3: one small menu, opened against whatever
   opened it (the plate's icon, a chat name, a DM thread's head, the
   inspect card). Kit B's slate and small capitals, the same buttons the
   Messages panel draws (btn.png, btngold.png for the one that acts on
   somebody else).

   Only with the HUD pass (`body.hud-v2`): world-player-menu.js offers the
   menu only when WorldHudV2.ready() says so. Fixed to the screen, placed by
   the script inside 8px of every edge, so it reads at 1920 and at 390.

   ── THE LAYER ───────────────────────────────────────────────────────────
   `corners`, the last layer: it opens over the plate, the chat panel and
   the inspect card (z 9000), under the moderation notice (100001).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

body.hud-v2 .wpm {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 9500;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 16px));
  padding: calc(6 * var(--hv-k, 1) * 1px);
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--hv-k, 1) * 1px);
  background: #141820;
  border: 2px solid rgba(227, 199, 154, .55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
  color: #e9dcc0;
  font: 400 16px/1.3 'VT323', var(--hv-f-px, monospace);
  pointer-events: auto;
  text-align: left;
}

body.hud-v2 .wpm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.hud-v2 .wpm-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 18px;
  color: var(--hv-gold-hi, #e3c79a);
}

body.hud-v2 .wpm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* a small slate button (btn.png, slice 3 3 5 3), small capitals: the
   Messages panel's .wm-btn, at a size a thumb can find */
body.hud-v2 .wpm-btn {
  flex: 1 1 0;
  min-height: 36px;
  box-sizing: border-box;
  margin: 0;
  border-style: solid;
  border-width: 3px 3px 5px 3px;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill / 3px 3px 5px 3px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 4px 10px 3px;
  font: 400 11px/1.2 var(--hv-f-px, monospace);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #e9dcc0;
  text-shadow: none;
  white-space: nowrap;
  image-rendering: pixelated;
  cursor: pointer;
}
body.hud-v2 .wpm-btn.is-danger {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
}
body.hud-v2 .wpm-btn:hover { filter: brightness(1.08); }
body.hud-v2 .wpm-btn:focus-visible,
body.hud-v2 .wpm-x:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 1px;
}

/* close.png, whole */
body.hud-v2 .wpm-x {
  flex: 0 0 auto;
  width: 13px;
  height: 14px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-image: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}

body.hud-v2 .wpm-ask {
  margin: 0;
  color: var(--hv-gold-hi, #e3c79a);
}
body.hud-v2 .wpm-help {
  margin: 0;
  font-size: 15px;
  color: #bdb29a;
}
body.hud-v2 .wpm-note {
  margin: 0;
  color: #f0a58a;
}

/* ── the report sheet (#3222 S3, FPRD §3.3) ──────────────────────────
   The menu turned into a short form: what is attached, the six reasons,
   an optional note, Send. A little wider than the menu, and never taller
   than the screen: it scrolls inside itself at 390x844. */
body.hud-v2 .wpm.is-sheet {
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: calc(6 * var(--hv-k, 1) * 1px);
}
body.hud-v2 .wpm-set {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.hud-v2 .wpm-legend {
  display: block;
  padding: 0;
  margin: 0 0 2px;
  font: 400 11px/1.3 var(--hv-f-px, monospace);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--hv-gold-hi, #e3c79a);
}
body.hud-v2 .wpm-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 28px;
  padding: 2px 4px;
  cursor: pointer;
}
body.hud-v2 .wpm-opt:hover { background: rgba(227, 199, 154, .08); }
body.hud-v2 .wpm-opt input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--hv-gold-hi, #e3c79a);
  cursor: pointer;
}
body.hud-v2 .wpm-opt input:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 1px;
}
body.hud-v2 .wpm-opt-t {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.hud-v2 .wpm-one { margin: 0; padding: 2px 4px; }
/* the words attached, shown to the reporter so they know what goes (the
   server copies its own record, never these) */
body.hud-v2 .wpm-quote {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  color: #bdb29a;
  quotes: '"' '"';
}
body.hud-v2 .wpm-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  resize: vertical;
  margin: 0;
  padding: 4px 6px;
  background: #0d1016;
  border: 1px solid rgba(227, 199, 154, .45);
  border-radius: 0;
  color: #e9dcc0;
  font: 400 16px/1.25 'VT323', var(--hv-f-px, monospace);
}
body.hud-v2 .wpm-text:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 0;
}
body.hud-v2 .wpm-left {
  align-self: flex-end;
  font-size: 14px;
  color: #8f8672;
}
body.hud-v2 .wpm-told {
  margin: 0;
  color: var(--hv-gold-hi, #e3c79a);
}

/* a thumb's target: 44 on a touch screen, the close with a transparent box
   round it as the Messages head's is */
@media (pointer: coarse) {
  body.hud-v2 .wpm-btn { min-height: 44px; }
  /* the close is a .wpm-btn too: it keeps its 13x14 picture, and the
     transparent box below is its thumb's target (it stretched to 44 tall) */
  body.hud-v2 .wpm-btn.wpm-x { min-height: 0; }
  body.hud-v2 .wpm-opt { min-height: 40px; align-items: center; }
  body.hud-v2 .wpm-opt input { margin-top: 0; width: 20px; height: 20px; }
  body.hud-v2 .wpm-x { position: relative; }
  body.hud-v2 .wpm-x::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ── the openers ──────────────────────────────────────────────────────
   A name in the v2 chat panel that opens the menu: the same name, marked
   only by the pointer and a focus ring, so the log reads as before. */
body.hud-v2 #world-chat-panel .wc2-n.is-who {
  cursor: pointer;
}
body.hud-v2 #world-chat-panel .wc2-n.is-who:hover { text-decoration: underline; }
body.hud-v2 #world-chat-panel .wc2-n.is-who:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 1px;
}

/* The target plate's MENU icon: three dots, the plate's own 6x6 glyph
   language (world-target-plate.css) */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act[data-act='menu']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e3c79a' d='M0 2h1v2H0zM2.5 2h1v2h-1zM5 2h1v2H5z'/%3E%3C/svg%3E");
}

} /* end of @layer corners */