/* ═══════════════════════════════════════════════════════════════════════
   world-sockets.css — THE SOCKET PICKER'S CSS, in one file (#3031 PR 2;
   the #2920 rule: one file per component, its rules in their layer).

   The picker (public/js/world-sockets.js) appears in two places: pinned in
   the bag's hover card when you tap a piece on the paper doll, and on the
   bag alone in button six's window, which the bar's empty sixth opens
   (#3689; it replaced the retired CARDS window and its tab per button).
   Both are parchment surfaces (your stuff), so the ink is the parchment's.

   ⭐THE CARD FACE IS THE VENUE'S (venue.html `.vd-card`), mirrored here
   because the world page does not load the venue's inline style: the
   painted face, a tag in its top-left corner, the name under it in the
   label face. Same object, third surface (the reuse-card-UI rule). If the
   venue's face changes, change it here too.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer skin {
/* ── THE PINNED PIECE CARD GROWS TO HOLD A PICKER ─────────────────────
   The bag's hover card is 220 to 300 wide, sized for a name and five
   numbers. Holding a picker it takes the phone's whole width less the
   gutter, and never more than the screen is tall: the grid inside scrolls,
   the card does not (placeCard already keeps it on the screen). */
body.skin-majesty .ww-hover.has-socket {
  width: min(380px, calc(100vw - 16px));
  max-width: none;
  min-width: 0;
  max-height: calc(100vh - 16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.skin-majesty .ww-hover.has-socket > * { flex: 0 0 auto; }
body.skin-majesty .ww-hover.has-socket .ww-hover-act { margin: 6px auto 0; }
/* its own way out, top right (world-windows.js pinPiece): the pinned card's
   plank, square, with the name kept clear of it */
body.skin-majesty .ww-hover.has-socket > b { padding-right: 40px; }
body.skin-majesty .ww-hover .ww-hover-x {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 0 3px;
  background: none;
  font-family: var(--sk-head, 'Press Start 2P', monospace);
  font-size: 10px;
  line-height: 1;
  color: var(--sk-ink, #e6c88a);
  cursor: pointer;
  image-rendering: pixelated;
  border-style: solid;
  border-image-repeat: repeat;
  border-image-source: url('/assets/ui/btn-idle.png?v=2026-08-29a');
  border-image-slice: 4 5 5 5 fill;
  border-image-width: calc(4px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2));
  border-width: calc(4px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2));
}
body.skin-majesty .ww-hover .ww-hover-x:hover { border-image-source: url('/assets/ui/btn-on.png?v=2026-08-29a'); }
body.skin-majesty .ww-hover .ww-hover-x:active { border-image-source: url('/assets/ui/btn-press.png?v=2026-08-29a'); }
/* a finger's buttons are a finger tall */
@media (pointer: coarse) {
  body.skin-majesty .ww-hover .ww-hover-x { width: 44px; height: 44px; }
  body.skin-majesty .ww-hover.has-socket > b { padding-right: 48px; }
  body.skin-majesty .ww-hover.has-socket .ww-hover-act,
  body.skin-majesty .wk-out,
  body.skin-majesty .ww-socknote .ww-socknote-go { min-height: 44px; }
}
body.skin-majesty .ww-hover.has-socket .wk-pick {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.skin-majesty .ww-hover.has-socket .wk-grid {
  flex: 1 1 auto;
  min-height: 96px;
  max-height: min(380px, 46vh);
}

/* ── THE PICKER ───────────────────────────────────────────────────────── */
body.skin-majesty .wk-pick {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(46, 33, 19, .28);
  color: #2e2113;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.2;
}
body.skin-majesty .wk-head {
  font-family: var(--sk-head, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: #5a4328;
  margin-bottom: 6px;
}
body.skin-majesty .wk-now {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
body.skin-majesty .wk-now > .vd-card { flex: 0 0 56px; width: 56px; }
body.skin-majesty .wk-nowtext { flex: 1 1 auto; min-width: 0; }
body.skin-majesty .wk-nowtext b {
  display: block;
  font-family: var(--sk-tome, 'VT323', monospace);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 2px;
}
body.skin-majesty .wk-nowtext i {
  display: block;
  font-style: normal;
  font-size: 15px;
  color: #5a4328;
}
body.skin-majesty .wk-nowtext .wk-flav { color: #8a7355; }
body.skin-majesty .wk-pick .wk-need { color: #8a2c1c; }
body.skin-majesty .wk-out { margin-top: 6px; min-height: 32px; }
body.skin-majesty .wk-note {
  margin: 6px 0 0;
  font-size: 16px;
  color: #6b5232;
}
body.skin-majesty .wk-note.warn { color: #8a2c1c; }
/* what the card under the pointer does, in words: the face's own rules
   text is too small to read at this size */
body.skin-majesty .wk-read {
  min-height: 20px;
  margin: 8px 0 4px;
  font-size: 15px;
  color: #5a4328;
}
body.skin-majesty .wk-read b {
  font-family: var(--sk-head, 'Press Start 2P', monospace);
  font-weight: 400;
  font-size: 7px;
  margin-right: 6px;
  color: #2e2113;
}
body.skin-majesty .wk-read i { font-style: normal; }
/* THE GRID: as many 68px faces as fit, scrolling inside itself, so a
   phone's finger flick scrolls the cards and never the world behind */
body.skin-majesty .wk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  align-content: start;
  gap: 8px 6px;
  padding: 2px 2px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
body.skin-majesty .wk-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* button six from the bag (#3620 slice 4c): how many of a potion the bag
   carries, on the icon's corner, the tray count's look */
body.skin-majesty .wk-cell { position: relative; }
body.skin-majesty .wk-cell .wk-count {
  position: absolute;
  top: 2px;
  right: 4px;
  font: 400 16px / 1 var(--hv-f-vt, monospace);
  color: #fff3d6;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  pointer-events: none;
}
body.skin-majesty .wk-cell .wk-need {
  font-style: normal;
  font-size: 13px;
  line-height: 1.05;
  text-align: center;
}
body.skin-majesty .wk-none {
  grid-column: 1 / -1;
  margin: 6px 0;
  color: #6b5232;
}

/* ── THE CARD FACE (venue.html .vd-card, mirrored) ─────────────────────── */
body.skin-majesty .wk-pick .vd-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, .08);
  color: inherit;
  text-align: center;
  cursor: pointer;
}
/* ⭐THE CARD IS ITS ICON (#3560, Wray 2026-10-02): a square slot holding the
   card's cell of spell_icons.png (world-card-icon.js), never a face scaled
   under the size it was painted at. Pointing at it opens the large preview
   (world-card-tip.js). The slot is square before its art loads, so a short
   list lays out at its real height and the pinned card is placed against
   the size it will have (#3031 review). */
body.skin-majesty .wk-pick .vd-card.is-icon { background: none; }
body.skin-majesty .wk-pick .vd-card > .wci { width: 100%; }
body.skin-majesty .wk-pick .vd-card .vd-name {
  display: block;
  font-family: var(--sk-head, 'Press Start 2P', monospace);
  font-size: 6px;
  line-height: 1.35;
  padding: 3px 2px 4px;
  overflow-wrap: break-word;
}
body.skin-majesty .wk-pick .vd-card.sel { outline: 3px solid #8a6420; outline-offset: -1px; }
body.skin-majesty .wk-pick .vd-card.still { cursor: default; }
/* a base ability (an empty socket's) or the empty bag: no card, so no
   preview. The base wears its own icon (base-abilities.png); the empty bag,
   which has none, keeps the old plate with its word */
body.skin-majesty .wk-pick .vd-card.base:not(.is-icon) {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: .62;
  background: rgba(46, 33, 19, .10);
}
body.skin-majesty .wk-pick .vd-card:disabled { opacity: .5; cursor: progress; }
body.skin-majesty .wk-pick .vd-card:focus-visible { outline: 3px solid #2e2113; outline-offset: -1px; }
body.skin-majesty .wk-pick .vd-tag {
  position: absolute;
  top: 3px;
  left: 3px;
  font-family: var(--sk-head, 'Press Start 2P', monospace);
  font-size: 6px;
  line-height: 1;
  padding: 3px 4px;
  background: #2e2113;
  color: #f0e2c6;
  letter-spacing: .04em;
}

/* ── BUTTON SIX'S WINDOW (the bar's empty sixth, #3689) ─────────────────
   The retired CARDS window's shape, kept: the right panel's .24 x .88, the
   bag's and the Settings' (world-skin.css, the per-door asks).
   world-wave0.js opens it docked right as `data-door='six'`, because it is
   your stuff and docks where your stuff docks; a column of item faces wants
   the height. On both the sheet and its strips, as every door's ask is (the
   strips are siblings). */
body.skin-majesty .ws-sheet[data-door='six'],
body.skin-majesty .ws-tabs[data-door='six'] { --sk-win-wpct: .24; --sk-win-hpct: .88; }
/* THE WHOLE WIDTH OF THE WINDOW. The sheet's body lays its child out as a
   flex row, and the picker on its own was as wide as its words: 297 of a
   landscape phone's 792 px, two faces across. The tabbed window it replaced
   only looked wider because its tab row was. */
body.skin-majesty .wk-sheet {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  gap: 6px;
  height: 100%;
  min-height: 0;
  color: #2e2113;
  font-family: 'VT323', ui-monospace, monospace;
}
body.skin-majesty .wk-sheet .wk-pick {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}
body.skin-majesty .wk-sheet .wk-grid {
  flex: 1 1 auto;
  min-height: 120px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
/* a phone's window is narrow: smaller faces */
@media (max-width: 520px) {
  body.skin-majesty .wk-sheet .wk-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
}
}
/* end of @layer skin */