/* p3_jsocial.css — the journal's ลูกไฟนำทาง (warp) and เพื่อน (friends) pages, js/p3_jsocial.js (mockups p3_jwarp A, p3_jfriends A).
   Sizes are the mockups' own pixels (1536x1024; their page areas 1036 and 982 px wide): each page is zoomed so its inside keeps
   that width in the journal's one window size (css/p3_journal.css). Phones held upright: one column, the page scrolls. */

/* =========================================== ลูกไฟนำทาง =========================================== */
#hb-page[data-tab="warp"] { padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); }
html:not(.mob-port) #hb-page[data-tab="warp"] { zoom: 0.995; overflow: hidden; }
.p3w { height: 100%; display: flex; flex-direction: column; color: var(--ink); font-family: 'Mitr', sans-serif; }
.p3w-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)); padding: 0 calc(4 * var(--u)); }
.p3w-ht { min-width: 0; }
.p3w-ht h2 { margin: 0; font: 700 calc(44 * var(--u)) / 1.12 'Mitr', sans-serif; color: var(--ink); }
.p3w-ht p { margin: calc(2 * var(--u)) 0 0; font: 600 calc(22.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #3d3550; }
.p3w-ht p b { color: #b8741a; font-weight: 600; }
.p3w-coins { flex: none; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(3 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u));
  border-radius: 99px; background: #fffaf0; border: calc(3 * var(--u)) solid #d4c6a6; }
.p3w-coins img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.p3w-coins b { font: 800 calc(22 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; font-variant-numeric: tabular-nums; }

/* the painted strip and its fires */
.p3w-rim { flex: none; margin: calc(12 * var(--u)) 0 calc(14 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(22 * var(--u)); background: #f3e8cf; border: calc(2.5 * var(--u)) solid #ddcfae; }
.p3w-strip { position: relative; aspect-ratio: 1536 / 320; border-radius: calc(17 * var(--u)); border: calc(3.5 * var(--u)) solid var(--ink); overflow: hidden; background: #1c2246;
  box-shadow: inset 0 0 calc(18 * var(--u)) rgba(0, 0, 0, 0.35); }
.p3w-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; pointer-events: none; }
.p3w-mk { position: absolute; width: calc(68 * var(--u)); height: calc(68 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -82%); border-radius: 50%; }
.p3w-mk .f { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
  filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 176, 64, 0.95)) drop-shadow(0 0 calc(16 * var(--u)) rgba(255, 120, 30, 0.55)); animation: p3wglow 2.4s ease-in-out infinite; }
.p3w-mk:nth-child(odd) .f { animation-delay: -1.1s; }
.p3w-mk.off .f { filter: grayscale(1) brightness(1.08) contrast(0.78) drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.45)); animation: none; opacity: 0.92; }
.p3w-mk .l { position: absolute; left: 50%; bottom: calc(12 * var(--u)); width: calc(32 * var(--u)); transform: translateX(-50%); pointer-events: none; filter: grayscale(0.85) brightness(1.15) drop-shadow(0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.4)); }
.p3w-mk:hover { transform: translate(-50%, -86%); }
.p3w-mk.sel::before { content: ''; position: absolute; left: 50%; bottom: calc(-6 * var(--u)); width: calc(92 * var(--u)); height: calc(26 * var(--u)); transform: translateX(-50%); border-radius: 50%;
  border: calc(3 * var(--u)) solid #8fe0ff; box-shadow: 0 0 calc(10 * var(--u)) #6fd0ff; }
.p3w-mk .pin { position: absolute; left: 50%; top: calc(-20 * var(--u)); width: 0; height: 0; transform: translateX(-50%); border-left: calc(11 * var(--u)) solid transparent; border-right: calc(11 * var(--u)) solid transparent;
  border-top: calc(15 * var(--u)) solid #8fe0ff; filter: drop-shadow(0 calc(2 * var(--u)) 0 var(--ink)); animation: p3wpin 1.2s ease-in-out infinite; }
@keyframes p3wglow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes p3wpin { 0%, 100% { margin-top: 0; } 50% { margin-top: calc(-5 * var(--u)); } }

/* the fires as rows */
.p3w-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: 0 calc(4 * var(--u)) calc(6 * var(--u)) 0; margin-right: calc(-6 * var(--u)); }
.p3w-row { flex: none; position: relative; display: grid; grid-template-columns: calc(100 * var(--u)) minmax(0, 1fr) auto calc(126 * var(--u)); align-items: center; width: 100%; height: calc(74 * var(--u));
  box-sizing: border-box; padding: 0 calc(12 * var(--u)) 0 calc(20 * var(--u)); border-radius: calc(16 * var(--u)); background: #fbf3e2; border: calc(2.5 * var(--u)) solid #dccfb2; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; }
.p3w-row:hover { background: #fff8ea; }
.p3w-f { width: calc(64 * var(--u)); height: calc(64 * var(--u)); object-fit: contain; filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(42, 36, 53, 0.25)); }
.p3w-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 calc(22 * var(--u)) / 1.3 'Mitr', sans-serif; padding-right: calc(10 * var(--u)); }
.p3w-nm b { font: 600 calc(28 * var(--u)) / 1.3 'Mitr', sans-serif; }
.p3w-nm span { font-weight: 500; }
.p3w-nm em { font-style: normal; font-weight: 600; color: #4b4260; }
.p3w-meta { display: flex; align-items: center; }
.p3w-lv { display: grid; place-items: center; width: calc(68 * var(--u)); height: calc(44 * var(--u)); box-sizing: border-box; border-radius: calc(11 * var(--u)); background: #ece6da; border: calc(2 * var(--u)) solid #d8d0c2;
  font: 800 calc(23 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; font-variant-numeric: tabular-nums; }
.p3w-sep { width: calc(2 * var(--u)); height: calc(46 * var(--u)); margin: 0 calc(17 * var(--u)) 0 calc(19 * var(--u)); background: #d8ccb2; }
.p3w-pr { display: flex; align-items: center; gap: calc(14 * var(--u)); width: calc(176 * var(--u)); font: 800 calc(27 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; font-variant-numeric: tabular-nums; }
.p3w-pr img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); object-fit: contain; }
.p3w-pr.poor { color: #c0392b; }
.p3w-pr .free { font: 700 calc(24 * var(--u)) / 1 'Mitr', sans-serif; color: #1e8a3a; }
.p3w-pr small { font: 500 calc(18 * var(--u)) / 1.2 'Mitr', sans-serif; color: #6a6078; }
.p3w-go { width: calc(126 * var(--u)); height: calc(48 * var(--u)); font-size: calc(23 * var(--u)); border-width: calc(3 * var(--u)); border-radius: calc(12 * var(--u));
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.14); }
.p3w-go.poor { filter: grayscale(0.55); opacity: 0.8; }
.p3w-walk { font-size: calc(21 * var(--u)); }
.p3w-here { display: grid; place-items: center; width: calc(130 * var(--u)); height: calc(42 * var(--u)); border-radius: 99px; background: #d9d3c6; color: #5f566c;
  font: 600 calc(19 * var(--u)) / 1 'Mitr', sans-serif; }
.p3w-row.here { background: #fff7e1; border-color: #f2c14a; }
.p3w-row.sel { box-shadow: 0 0 0 calc(4 * var(--u)) #7fcaf8; border-color: #3b8fdc; }
.p3w-row.flash { animation: p3wflash 1.2s ease; }
@keyframes p3wflash { 0%, 40% { background: #dff1ff; } 100% { background: #fbf3e2; } }
/* not lit yet: grey, a dim fire and a padlock */
.p3w-row.off { background: #dcd7cf; border-color: #c9c2b6; color: #5d5568; }
.p3w-row.off:hover { background: #e3dfd8; }
.p3w-row.off .p3w-f { filter: grayscale(1) brightness(0.8) contrast(0.95); opacity: 0.85; }
.p3w-row.off .p3w-nm b { color: #4f4760; }
.p3w-row.off .p3w-nm span { font-size: calc(20 * var(--u)); }
.p3w-row.off .p3w-lv { background: #e6e2db; border-color: #cfc8bc; color: #6a6276; }
.p3w-row.off .p3w-sep { background: #c9c1b2; }
.p3w-lock { display: grid; place-items: center; }
.p3w-lock img { width: calc(36 * var(--u)); height: calc(44 * var(--u)); object-fit: contain; filter: grayscale(0.9) brightness(0.95); opacity: 0.8; }
.p3w-row.reg.open { border-bottom-left-radius: calc(6 * var(--u)); border-bottom-right-radius: calc(6 * var(--u)); }
.p3w-sub { flex: none; display: flex; flex-direction: column; gap: calc(5 * var(--u)); margin: calc(-2 * var(--u)) 0 calc(2 * var(--u)) calc(30 * var(--u)); }
.p3w-sub .p3w-row { height: calc(62 * var(--u)); }
.p3w-sub .p3w-f { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.p3w-sub .p3w-nm b { font-size: calc(24 * var(--u)); }
/* a region's name over its fires, and the fold of its places not lit yet */
.p3w-gh { flex: none; display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin: calc(8 * var(--u)) calc(6 * var(--u)) calc(-1 * var(--u)); padding-bottom: calc(3 * var(--u)); border-bottom: calc(2 * var(--u)) solid #e2d5b8; }
.p3w-gh b { font: 700 calc(23 * var(--u)) / 1.25 'Mitr', sans-serif; }
.p3w-gh span { font: 500 calc(18 * var(--u)) / 1.25 'Mitr', sans-serif; color: #7a6f86; }
.p3w-more { flex: none; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(2.5 * var(--u)) dashed #c9c2b6;
  background: #efebe4; color: #5d5568; font: 500 calc(19 * var(--u)) / 1 'Mitr', sans-serif; cursor: pointer; text-align: left; }
.p3w-more img { width: calc(22 * var(--u)); height: calc(27 * var(--u)); object-fit: contain; filter: grayscale(0.9); opacity: 0.8; }
.p3w-more span { margin-left: auto; font-weight: 600; color: #3b8fdc; }
.p3w-more:hover { background: #f5f2ec; }
.p3w-note { flex: none; margin: calc(8 * var(--u)) calc(6 * var(--u)) 0; font: 500 calc(17 * var(--u)) / 1.4 'Mitr', sans-serif; color: #7a6f86; }

/* =========================================== เพื่อน =========================================== */
#hb-page[data-tab="friends"] { padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)); }
html:not(.mob-port) #hb-page[data-tab="friends"] { zoom: 1.073; overflow: hidden; }
.p3f { height: 100%; display: flex; flex-direction: column; color: var(--ink); font-family: 'Mitr', sans-serif; }
.p3f-h { flex: none; font: 700 calc(31 * var(--u)) / 1.25 'Mitr', sans-serif; }
.p3f-flag { flex: none; display: flex; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(9 * var(--u)); }
.p3f-pf { flex: none; min-width: calc(273 * var(--u)); height: calc(50 * var(--u)); padding: 0 calc(24 * var(--u)); border-width: calc(3.5 * var(--u)); border-radius: calc(14 * var(--u));
  font-size: calc(25 * var(--u)); box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.15); }
.p3f-pf.on { font-size: calc(22 * var(--u)); }
.p3f-flag span { min-width: 0; font: 500 calc(18 * var(--u)) / 1.35 'Mitr', sans-serif; color: #6a6078; }
.p3f-sub { flex: none; margin: calc(10 * var(--u)) 0 calc(8 * var(--u)); font: 600 calc(22 * var(--u)) / 1.3 'Mitr', sans-serif; }
.p3f-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 314fr) minmax(0, 330fr) minmax(0, 298fr); gap: calc(10 * var(--u)); }
.p3f-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: calc(12 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u));
  background: #fdf7e6; border: calc(3 * var(--u)) solid var(--ink); }
.p3f-col h3 { flex: none; display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin: 0 calc(8 * var(--u)) calc(10 * var(--u)); font: 700 calc(27 * var(--u)) / 1.2 'Mitr', sans-serif; }
.p3f-col h3 small { font: 500 calc(17 * var(--u)) / 1 'Mitr', sans-serif; color: #7a6f86; }
.p3f-cards { flex: 1; min-height: 0; overflow-x: hidden; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding-right: calc(2 * var(--u)); }
.p3f-card { flex: none; min-width: 0; display: grid; grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(7 * var(--u)); min-height: calc(140 * var(--u)); box-sizing: border-box;
  padding: calc(8 * var(--u)) calc(7 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); border-radius: calc(12 * var(--u)); background: #def0ff; border: calc(2.5 * var(--u)) solid #8fc8f2; }
.p3f-pt { position: relative; display: block; width: calc(110 * var(--u)); height: calc(110 * var(--u)); box-sizing: border-box; border-radius: 50%; overflow: hidden; border: calc(3 * var(--u)) solid var(--ink);
  background: radial-gradient(circle at 50% 38%, #e9f5ff, #a9d3f6 75%); box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(42, 36, 53, 0.12); }
.p3f-pt canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p3f-pt.q { display: grid; place-items: center; background: #ece8e1; }
.p3f-pt.q i { font: 800 calc(52 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; font-style: normal; color: #a49cae; }
.p3f-pt.grey { background: radial-gradient(circle at 50% 38%, #f1f0ee, #c9c7c3 75%); }
.p3f-pt.grey canvas { filter: grayscale(1) contrast(0.85) brightness(1.08); opacity: 0.8; }
.p3f-in { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(1 * var(--u)); }
.p3f-in b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 calc(20 * var(--u)) / 1.3 'Mitr', sans-serif; }
.p3f-in b .dot { display: inline-block; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: calc(4 * var(--u)); border-radius: 50%; background: #3fc56a; border: calc(2 * var(--u)) solid var(--ink); vertical-align: middle; }
.p3f-in small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 calc(17 * var(--u)) / 1.3 'Mitr', sans-serif; color: #3d3550; }
.p3f-in small.pl { color: #5e6f8a; }
.p3f-b { width: 100%; height: calc(46 * var(--u)); margin-top: calc(6 * var(--u)); padding: 0 calc(8 * var(--u)); border-width: calc(3 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(20 * var(--u));
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.14); }
.p3f-bs { display: flex; gap: calc(6 * var(--u)); width: 100%; }
.p3f-bs .p3f-b { flex: 1 1 auto; min-width: 0; width: auto; padding: 0 calc(6 * var(--u)); font-size: calc(16.5 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.p3f-bs .p3f-b.rm { flex: 0 0 calc(58 * var(--u)); }
.p3f-bs .p3f-tag { flex: 1 1 auto; margin-top: calc(6 * var(--u)); }
.p3f-tag { display: grid; place-items: center; min-height: calc(40 * var(--u)); margin-top: calc(6 * var(--u)); padding: 0 calc(10 * var(--u)); box-sizing: border-box; border-radius: 99px; background: #eae4d6; color: #5f566c;
  font: 600 calc(16 * var(--u)) / 1.2 'Mitr', sans-serif; white-space: nowrap; }
.p3f-tag.in { background: #d6f3dc; color: #1e7a3a; }
.p3f-card.off { background: #d6d4d1; border-color: #bdbab5; }
.p3f-card.off b, .p3f-card.off small { color: #8a8590; }
.p3f-card.off small.pl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.p3f-card.off .p3f-b.rm { flex: 0 0 calc(110 * var(--u)); }
.p3f-card.off .p3f-bs { justify-content: center; }
/* a column with nobody in it */
.p3f-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(24 * var(--u)); text-align: center; }
.p3f-eic { display: grid; place-items: center; width: calc(112 * var(--u)); height: calc(112 * var(--u)); margin-bottom: calc(6 * var(--u)); border-radius: 50%; background: #efe6d0; border: calc(3 * var(--u)) dashed #cdbd99; }
.p3f-eic img { width: calc(70 * var(--u)); height: calc(70 * var(--u)); object-fit: contain; filter: saturate(0.6) opacity(0.85); }
.p3f-empty b { font: 600 calc(21 * var(--u)) / 1.3 'Mitr', sans-serif; }
.p3f-empty p { margin: 0; font: 400 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif; color: #6a6078; }
/* the whisper strip */
.p3f-tip { flex: none; display: flex; align-items: center; width: 100%; max-width: 100%; gap: calc(10 * var(--u)); min-height: calc(60 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(26 * var(--u));
  box-sizing: border-box; border-radius: calc(14 * var(--u)); background: #eef7ff; border: calc(2.5 * var(--u)) solid #6fb3ea; }
.p3f-tip > span { flex: 1; min-width: 0; font: 600 calc(21 * var(--u)) / 1.35 'Mitr', sans-serif; }
.p3f-tip > span b { font-weight: 700; color: #1f63b0; }
.p3f-tb { flex: none; height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)); border-width: calc(3 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(17 * var(--u)); }

/* =========================================== phones held upright =========================================== */
html.mob-port #hb-page[data-tab="warp"], html.mob-port #hb-page[data-tab="friends"] { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u)); }
html.mob-port .p3w, html.mob-port .p3f { height: auto; }
html.mob-port .p3w-ht h2 { font-size: calc(36 * var(--u)); }
html.mob-port .p3w-ht p { font-size: calc(18 * var(--u)); }
html.mob-port .p3w-coins { margin-top: calc(4 * var(--u)); }
html.mob-port .p3w-rim { margin: calc(10 * var(--u)) calc(-12 * var(--u)) calc(12 * var(--u)); padding: 0; border-radius: 0; border-left: 0; border-right: 0; }
html.mob-port .p3w-strip-sc { overflow-x: auto; scrollbar-width: none; }
html.mob-port .p3w-strip-sc::-webkit-scrollbar { display: none; }
html.mob-port .p3w-strip { width: calc(820 * var(--u)); border-radius: 0; border-width: 0; }
html.mob-port .p3w-mk { width: calc(66 * var(--u)); height: calc(66 * var(--u)); }
html.mob-port .p3w-list { overflow: visible; margin-right: 0; padding-right: 0; }
html.mob-port .p3w-row { grid-template-columns: calc(66 * var(--u)) minmax(0, 1fr) auto; grid-template-areas: "f nm act" "f meta act"; height: auto; min-height: calc(78 * var(--u));
  row-gap: calc(2 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)); }
html.mob-port .p3w-f { grid-area: f; width: calc(58 * var(--u)); height: calc(58 * var(--u)); }
html.mob-port .p3w-nm { grid-area: nm; font-size: calc(17 * var(--u)); }
html.mob-port .p3w-nm b { font-size: calc(22 * var(--u)); }
html.mob-port .p3w-meta { grid-area: meta; }
html.mob-port .p3w-lv { width: calc(50 * var(--u)); height: calc(32 * var(--u)); font-size: calc(19 * var(--u)); }
html.mob-port .p3w-sep { height: calc(28 * var(--u)); margin: 0 calc(10 * var(--u)); }
html.mob-port .p3w-pr { width: auto; gap: calc(8 * var(--u)); font-size: calc(22 * var(--u)); }
html.mob-port .p3w-pr img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
html.mob-port .p3w-go, html.mob-port .p3w-here, html.mob-port .p3w-lock { grid-area: act; }
html.mob-port .p3w-go { width: calc(104 * var(--u)); height: calc(50 * var(--u)); }
html.mob-port .p3w-here { width: calc(104 * var(--u)); }
html.mob-port .p3w-sub { margin-left: calc(14 * var(--u)); }
html.mob-port .p3w-sub .p3w-row { height: auto; min-height: calc(66 * var(--u)); }
html.mob-port .p3w-gh { flex-wrap: wrap; row-gap: 0; }

html.mob-port .p3f-h { font-size: calc(26 * var(--u)); }
html.mob-port .p3f-flag { flex-direction: column; align-items: stretch; gap: calc(6 * var(--u)); }
html.mob-port .p3f-pf { width: 100%; }
html.mob-port .p3f-flag span { font-size: calc(16 * var(--u)); }
html.mob-port .p3f-sub { display: none; }
html.mob-port .p3f-cols { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
html.mob-port .p3f-cards { overflow: visible; }
html.mob-port .p3f-card { grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr); min-height: calc(118 * var(--u)); }
html.mob-port .p3f-pt { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
html.mob-port .p3f-empty { padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); }
html.mob-port .p3f-eic { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
html.mob-port .p3f-eic img { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
html.mob-port .p3f-tip { flex-wrap: wrap; padding: calc(10 * var(--u)) calc(12 * var(--u)); }
html.mob-port .p3f-tip > span { flex: 1 1 100%; font-size: calc(17 * var(--u)); }
html.mob-port .p3f-tb { flex: 1 1 0; }