/* p3_frienddetail.css — ดูรายละเอียดเพื่อน (js/p3_frienddetail.js), mockup B (assets/gen/nightcamp_fd_b_raw.png).
   It draws inside the journal's เพื่อน page, so it shares that page's zoom (css/p3_jsocial.css: the page keeps the 982 px
   width of the friends mockup, the same page area as mockup B): every size here is mockup B's own pixels.
   Measured: the slot area 615 x 655 (slots 115 x 110, the hero's feet at 74 %), the dark card 328 x 655, buttons 282 x 41. */
.p3d { position: relative; height: calc(100% + 8 * var(--u)); margin: calc(-4 * var(--u)) calc(-8 * var(--u)) 0 calc(-8 * var(--u)); display: grid;
  grid-template-columns: minmax(0, 1fr) calc(328 * var(--u)); gap: calc(12 * var(--u)); color: var(--ink); font-family: 'Mitr', sans-serif; }

/* ---------------- the hero and the worn slots ---------------- */
.p3d-doll { position: relative; min-width: 0; min-height: calc(655 * var(--u)); }
.p3d-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.p3d.off .p3d-hero { filter: grayscale(1) contrast(0.88) brightness(1.06); opacity: 0.72; }
.p3d-q { position: absolute; left: 52%; top: 40%; transform: translate(-50%, -50%); display: grid; place-items: center; width: calc(150 * var(--u)); height: calc(150 * var(--u));
  border-radius: 50%; background: #ece8e1; border: calc(4 * var(--u)) dashed #c9c2b6; font: 800 calc(76 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #a49cae; }
.p3d-back { position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u)); z-index: 2; width: calc(156 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(12 * var(--u));
  border-width: calc(3.5 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(24 * var(--u)); box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.15); }
.p3d-col { position: absolute; z-index: 1; display: flex; gap: calc(28 * var(--u)); pointer-events: none; }
.p3d-col.L, .p3d-col.R { top: calc(80 * var(--u)); flex-direction: column; gap: calc(14 * var(--u)); }
.p3d-col.L { left: calc(-4 * var(--u)); }
.p3d-col.R { right: calc(-7 * var(--u)); }
.p3d-col.B { top: calc(523 * var(--u)); left: calc(178 * var(--u)); gap: calc(5 * var(--u)); }
.p3d-slot { pointer-events: auto; width: calc(160 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); cursor: default; }
.p3d-box { position: relative; display: grid; place-items: center; width: calc(115 * var(--u)); height: calc(110 * var(--u)); box-sizing: border-box; border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(15 * var(--u)); box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.12), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.6); }
.p3d-col.B .p3d-box { height: calc(100 * var(--u)); }
.p3d-box canvas { width: 84%; height: 84%; display: block; }
.p3d-box .p3d-sub { position: absolute; right: calc(-10 * var(--u)); top: calc(-10 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #ffe2f1;
  border: calc(3 * var(--u)) solid var(--ink); box-sizing: border-box; padding: calc(3 * var(--u)); }
.p3d-box.empty { background: #ebe1c8; border-color: #b9ab8e; box-shadow: inset 0 calc(3 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.08); }
.p3d-box.r-common { background: linear-gradient(#f7f2e7, #dcd2be); }
.p3d-box.r-rare { background: linear-gradient(#d3e9ff, #86bcf1); }
.p3d-box.r-epic { background: linear-gradient(#e8d6ff, #a985ec); }
.p3d-box.r-legend { background: linear-gradient(#fff1bd, #f1bc4b); }
.p3d-box.r-fashion { background: linear-gradient(#ffe2f1, #f6a2cd); }
.p3d-slot.covered .p3d-box { opacity: 0.45; }
.p3d-lbl { max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(5 * var(--u)); border-radius: calc(8 * var(--u));
  background: rgba(250, 243, 226, 0.9); } /* (a big weapon's blade may pass behind) */
.p3d-lbl b { font: 700 calc(16 * var(--u)) / 1.2 'Mitr', sans-serif; }
.p3d-lbl i { max-width: 100%; font: 500 calc(14.5 * var(--u)) / 1.2 'Mitr', sans-serif; font-style: normal; color: #3d3550; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------------- the dark card ---------------- */
.p3d-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)); color: #eef0ff;
  background: linear-gradient(#272b47, #1b1e33); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(18 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #4fa3ea, 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.22); }
.p3d-nm { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0; }
.p3d-nm b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 calc(34 * var(--u)) / 1.2 'Mitr', sans-serif; color: #fff; }
.p3d-dot { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #8a8fa8; border: calc(2.5 * var(--u)) solid #12142a; }
.p3d-dot.on { background: #3fd06c; box-shadow: 0 0 calc(8 * var(--u)) rgba(63, 208, 108, 0.7); }
.p3d-nm em { flex: none; font: 500 calc(15 * var(--u)) / 1 'Mitr', sans-serif; font-style: normal; color: #aab0cc; }
.p3d-lv { flex: none; margin-top: calc(1 * var(--u)); font: 600 calc(20 * var(--u)) / 1.3 'Mitr', sans-serif; color: #e8ebff; }
.p3d-rows { flex: none; display: flex; flex-direction: column; gap: calc(2 * var(--u)); margin-top: calc(6 * var(--u)); padding-bottom: calc(10 * var(--u)); border-bottom: calc(2 * var(--u)) solid #464c72; }
.p3d-r { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(33 * var(--u)); min-width: 0; font: 600 calc(19 * var(--u)) / 1.25 'Mitr', sans-serif; }
.p3d-r > img, .p3d-gem { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); object-fit: contain; }
.p3d-gem { position: relative; display: grid; place-items: center; border-radius: 50%; }
.p3d-gem img { width: 112%; height: 112%; object-fit: contain; }
.p3d-r > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3d-r small { font: 500 calc(14.5 * var(--u)) / 1 'Mitr', sans-serif; color: #9ec9f2; }
.p3d-r.dim { color: #9fa4c0; }
.p3d-r.dim > img { filter: grayscale(0.6); opacity: 0.75; }
/* the record tiles and the shop chip */
.p3d-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(9 * var(--u)); padding: calc(10 * var(--u)) 0; }
.p3d-tile, .p3d-chip { flex: none; display: flex; align-items: center; gap: calc(12 * var(--u)); box-sizing: border-box; color: var(--ink); border-radius: calc(12 * var(--u));
  font: 600 calc(17.5 * var(--u)) / 1.25 'Mitr', sans-serif; }
.p3d-tile { width: 100%; min-height: calc(57 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u)) calc(14 * var(--u)); background: #d9ecfb; border: calc(2 * var(--u)) solid #a9d2f4; }
.p3d-tile.dim { background: #c9d3de; border-color: #b0bccb; color: #4c5568; }
.p3d-chip { max-width: 100%; min-height: calc(49 * var(--u)); padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); background: #fbf0d8; border: calc(2 * var(--u)) solid #e3cf9f; }
.p3d-tile img, .p3d-chip img { flex: none; width: calc(42 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; }
.p3d-offnote { margin: calc(4 * var(--u)) 0 0; font: 500 calc(16 * var(--u)) / 1.45 'Mitr', sans-serif; color: #aab0cc; }
/* the buttons */
.p3d-bs { flex: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding-top: calc(10 * var(--u)); border-top: calc(2 * var(--u)) solid #464c72; }
.p3d-b { width: 100%; height: calc(41 * var(--u)); padding: 0 calc(10 * var(--u)); border-width: calc(3 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(19.5 * var(--u));
  -webkit-text-stroke-width: calc(3.5 * var(--u)); box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.16); }
.p3d-b img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); object-fit: contain; margin-right: calc(4 * var(--u)); }
.p3d-b.grey { font-size: calc(18 * var(--u)); }
.p3d-b:disabled { filter: grayscale(0.7) brightness(0.92); opacity: 0.55; }

/* ---------------- the list: every card opens its page ---------------- */
.p3f-card[data-fd] { cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; }
.p3f-card[data-fd]:hover { border-color: #3b8fdc; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(127, 202, 248, 0.75); }
.p3f-card[data-fd] .p3f-pt { transition: transform 0.12s; }
.p3f-card[data-fd]:hover .p3f-pt { transform: scale(1.04); }

/* ---------------- phones held upright: the hero on top, the card under it ---------------- */
html.mob-port .p3d { display: flex; flex-direction: column; height: auto; margin: 0; gap: calc(12 * var(--u)); }
html.mob-port .p3d-doll { min-height: calc(640 * var(--u)); }
html.mob-port .p3d-col.L { left: 0; }
html.mob-port .p3d-col.R { right: 0; }
html.mob-port .p3d-slot { width: calc(130 * var(--u)); }
html.mob-port .p3d-box { width: calc(96 * var(--u)); height: calc(92 * var(--u)); }
html.mob-port .p3d-col.B { left: 50%; transform: translateX(-50%); top: calc(530 * var(--u)); }
html.mob-port .p3d-col.B .p3d-box { height: calc(88 * var(--u)); }
html.mob-port .p3d-card { padding: calc(14 * var(--u)) calc(16 * var(--u)); }
html.mob-port .p3d-mid { flex: none; }