/* Anzol de Estrelas — css/panels-mp.css
 * Owner: MP15 (MP UI panels & icons). Styles of the Estilo panel and the MP additions to the dock panels
 * (docs/SPEC-MP.md §11.4, §11.8–11.9). Shell styles (tabs, HUD chip, account modals, profile card) live in
 * css/style.css (MP14a); bay UI + Turma (chat, wheel, Balão, ruler) in css/social.css (MP14b). Same rules as
 * css/style.css: skin vars, --ui-px, the three bitmap-font tiers, no external resources.
 * Units: every panel measure is in skin px (calc(Npx * var(--pu)), --pu = --ui-px as a number, set by the panel kit on
 * .pn); canvases are shown at an INTEGER css factor set from JS; touch targets ≥ 44 css px (36 for small secondary
 * buttons, like the rest of the dock). Only the three bitmap-font tiers, weight 400, no letter-spacing.
 * Prefix: .pns-* (Estilo) · .pnm-* (MP lines of Mapa, Tripulação, Ajustes, Constelações, Loja).
 * The Estilo grid styles G.ui.c.itemTile (.mp-tile, MP14b's component) inside .pn-style only.
 */

/* ============================================================================================ Estilo — frame */
.pn-style { --tier: #b8b0a0; padding-bottom: 0; }
.pn-style .pns-page { gap: calc(2px * var(--pu)); }
.pn-style .pns-tabs { margin-bottom: 0; }

/* header: anchor badge + patrimônio + title · próximo sonho · permanence line */
.pns-head { display: flex; flex-direction: column; gap: calc(1px * var(--pu)); padding: calc(1px * var(--pu)) calc(3px * var(--pu)); }
.pns-headrow { gap: calc(3px * var(--pu)); }
.pns-head .pns-badge { --px: 48; width: calc(20px * var(--pu)) !important; height: calc(20px * var(--pu)) !important; }
.pns-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pns-pat { font-family: var(--font-body, var(--font-ui)); font-size: var(--fs-body, calc(10px * var(--pu))); line-height: 1.15; color: #2e1c2b; }
.pns-title { color: #8a5a10; }
.pns-dream { color: #5a3a2a; padding-left: calc(2px * var(--pu)); box-shadow: inset calc(1px * var(--pu)) 0 0 #e8a82a;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pns-forever { display: flex; align-items: center; gap: calc(1.5px * var(--pu)); color: #27692a; }
.pns-forever .pn-ico { width: calc(8px * var(--pu)) !important; height: calc(8px * var(--pu)) !important; }
.pns-idhead { display: flex; flex-direction: column; gap: calc(1px * var(--pu)); padding-top: calc(1px * var(--pu));
  border-top: calc(1px * var(--pu)) solid rgba(46, 28, 43, .16); }

/* ============================================================================================ Montagem */
.pns-mont { display: flex; gap: calc(3px * var(--pu)); align-items: stretch; min-width: 0; }
.pns-stage { position: relative; flex: none; align-self: flex-start; padding: calc(2px * var(--pu)); background: #2c160f;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, inset 0 0 0 calc(1px * var(--pu)) #8a5a3a, inset 0 calc(2px * var(--pu)) 0 calc(1px * var(--pu)) #54281e; }
.pns-cv, .pns-mcv, .pns-boatcv { display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.pns-ribbon { position: absolute; left: calc(-3px * var(--pu)); top: calc(5px * var(--pu)); z-index: 1; padding: 0 calc(3px * var(--pu)) 0 calc(4px * var(--pu));
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); line-height: calc(10px * var(--pu));
  color: #fff6e0; background: #1f8a80; text-shadow: 0 calc(1px * var(--pu)) 0 #10403c; pointer-events: none;
  box-shadow: 0 calc(1px * var(--pu)) 0 #10403c, inset 0 calc(1px * var(--pu)) 0 #6ad8c0, calc(1px * var(--pu)) 0 0 #10403c; }
.pns-ribbon::before { content: ''; position: absolute; left: 0; bottom: calc(-2px * var(--pu)); border-top: calc(2px * var(--pu)) solid #0d302c;
  border-left: calc(3px * var(--pu)) solid transparent; }
.pns-ctrls { display: flex; flex-direction: column; gap: calc(1.5px * var(--pu)); flex: 1 1 auto; min-width: 0; }
.pns-ctrls > .ui-btn, .pns-ctrls > .pn-btn { width: 100%; justify-content: flex-start; }
.pns-poseline { color: #e8cfa8; text-shadow: 0 calc(1px * var(--pu)) 0 #2c160f; margin-top: auto; }
.pns-catline { padding: 0 calc(1px * var(--pu)); min-height: calc(10px * var(--pu)); }
.pns-skinnote { display: flex; gap: calc(1.5px * var(--pu)); align-items: flex-start; padding: calc(1px * var(--pu)) calc(2px * var(--pu));
  color: #f0dcc0; background: rgba(20, 12, 28, .35); box-shadow: inset calc(1px * var(--pu)) 0 0 #6ad8c0; }
.pns-skinnote .pn-ico { width: calc(8px * var(--pu)) !important; height: calc(8px * var(--pu)) !important; margin-top: calc(1px * var(--pu)); }
.pns-skins { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(2px * var(--pu)); }
.pns-skin { height: 48px; min-width: 0; padding: 0; border: 0; background: var(--sk);
  box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, inset 0 calc(2px * var(--pu)) 0 rgba(255, 255, 255, .35), inset 0 calc(-2px * var(--pu)) 0 rgba(46, 28, 43, .3); }
.pns-skin[aria-checked="true"] { box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, 0 0 0 calc(2.5px * var(--pu)) #f2b832, inset 0 calc(2px * var(--pu)) 0 rgba(255, 255, 255, .35); }

/* ============================================================================================ item grid + tiles */
.pns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(40px * var(--pu)), 1fr)); gap: calc(1.5px * var(--pu)); min-width: 0; }
.pn-style .mp-tile { position: relative; min-width: 0; --tier: #b8b0a0; }
.pn-style .mp-tile__pick { display: flex; flex-direction: column; align-items: center; gap: calc(.5px * var(--pu)); width: 100%; height: 100%; min-height: 44px;
  min-width: 0; margin: 0; padding: 0 0 calc(1.5px * var(--pu)); color: #2e1c2b; cursor: pointer; text-align: center;
  border-style: solid; border-color: transparent; border-width: calc(3px * var(--pu)); border-image: var(--pn-f-card) 6 fill / calc(6px * var(--pu)) round;
  background: #fbeed2; background-clip: padding-box; image-rendering: pixelated;
  box-shadow: inset 0 calc(-2px * var(--pu)) 0 var(--tier); }
.pn-style .mp-tile__pick:hover { filter: brightness(1.05); }
.pn-style .mp-tile__well { position: relative; display: grid; place-items: center; width: 100%; height: calc(27px * var(--pu)); min-height: 0;
  background: #e8d4a8; box-shadow: inset 0 calc(1px * var(--pu)) 0 #c89a62, inset 0 calc(-1px * var(--pu)) 0 #fff6e0; }
.pn-style .mp-tile__well > img, .pn-style .mp-tile__well > .px-icon { --px: 48; width: calc(24px * var(--pu)) !important; height: calc(24px * var(--pu)) !important; max-width: 100%; margin: 0; }
.pn-style .mp-tile__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; padding: 0 calc(.5px * var(--pu));
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); line-height: 1.15; overflow-wrap: anywhere; min-height: 2.3em;
  white-space: normal; text-overflow: clip; color: #2e1c2b; }
.pn-style .mp-tile__chip { display: inline-flex; align-items: center; justify-content: center; gap: calc(.5px * var(--pu)); max-width: 100%; min-height: calc(9px * var(--pu));
  padding: 0 calc(1.5px * var(--pu)); font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); line-height: 1.1;
  color: #fff1d6; background: rgba(24, 18, 48, .88); white-space: nowrap; overflow: hidden;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #140c22, inset 0 calc(1px * var(--pu)) 0 #5a4a86; }
.pn-style .mp-tile__chip > img, .pn-style .mp-tile__chip > .px-icon { --px: 32; width: calc(7px * var(--pu)) !important; height: calc(7px * var(--pu)) !important; flex: none; margin: 0; }
.pn-style .mp-tile__chip > span { overflow: hidden; text-overflow: ellipsis; }
.pn-style .mp-tile__chip--price { color: #ffe07a; box-shadow: 0 0 0 calc(1px * var(--pu)) #140c22, inset 0 calc(1px * var(--pu)) 0 #5a4a86, inset 0 calc(-1px * var(--pu)) 0 var(--tier); }
.pn-style .mp-tile__pip { width: calc(2px * var(--pu)); height: calc(2px * var(--pu)); margin-left: calc(.5px * var(--pu)); background: #8a3a2a; flex: none; }
.pn-style .mp-tile__pip.is-ok { background: #4cc070; box-shadow: 0 0 0 calc(.5px * var(--pu)) #1a4a24; }
.pn-style .mp-tile__chip--using { color: #2a1408; background: #f2b832; box-shadow: 0 0 0 calc(1px * var(--pu)) #6a3a08, inset 0 calc(1px * var(--pu)) 0 #fff0a8; }
.pn-style .mp-tile__chip--owned { color: #27692a; background: #dff0c8; box-shadow: 0 0 0 calc(1px * var(--pu)) #3f7a3a; }
.pn-style .mp-tile__chip--lock { color: #f0d8c8; background: #5a3a44; white-space: normal; text-align: left; max-height: calc(18px * var(--pu)); }
.pn-style .mp-tile__new { position: absolute; left: calc(1px * var(--pu)); top: calc(1px * var(--pu)); width: calc(3px * var(--pu)); height: calc(3px * var(--pu));
  background: #e8402e; box-shadow: 0 0 0 calc(.5px * var(--pu)) #6a0a24, inset calc(.5px * var(--pu)) calc(.5px * var(--pu)) 0 #ff9a7a; pointer-events: none; }
.pn-style .mp-tile__wish { position: absolute; right: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; opacity: .55; }
.pn-style .mp-tile__wish > img, .pn-style .mp-tile__wish > .px-icon { --px: 32; width: calc(8px * var(--pu)) !important; height: calc(8px * var(--pu)) !important; margin: 0; }
.pn-style .mp-tile__wish:hover, .pn-style .mp-tile__wish.is-on, .pn-style .mp-tile__wish[aria-pressed="true"] { opacity: 1; }
.pn-style .mp-tile.is-equipped .mp-tile__pick { border-image-source: var(--pn-f-cardHi); background-color: #fdf0cc;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #f2b832, inset 0 calc(-2px * var(--pu)) 0 var(--tier); }
.pn-style .mp-tile.is-trying .mp-tile__pick { background-color: #e8f8f0; box-shadow: 0 0 0 calc(1px * var(--pu)) #1f8a80, inset 0 calc(-2px * var(--pu)) 0 var(--tier); }
.pn-style .mp-tile.is-trying .mp-tile__well { background: #cfeee4; }
.pn-style .mp-tile.is-locked .mp-tile__pick { border-image-source: var(--pn-f-cardDim); background-color: #e9dfc9; }
.pn-style .mp-tile.is-locked .mp-tile__well > img { filter: grayscale(.85) brightness(.85); }
.pn-style .mp-tile.is-poor .mp-tile__price { color: #ff9a7a; }
.pn-style .mp-tile.is-glow .mp-tile__well { background: #d8cbe8; box-shadow: inset 0 calc(1px * var(--pu)) 0 #8a7ab8, inset 0 calc(-1px * var(--pu)) 0 #f4eeff; }
.pn-style .mp-tile.is-far .mp-tile__chip--price { opacity: .8; }
.pns-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1px * var(--pu)); min-height: 44px; width: 100%;
  margin: 0; padding: calc(2px * var(--pu)) 0; color: #2e1c2b; cursor: pointer;
  border-style: solid; border-color: transparent; border-width: calc(3px * var(--pu)); border-image: var(--pn-f-cardDim) 6 fill / calc(6px * var(--pu)) round;
  background: #e9dfc9; background-clip: padding-box; }
.pns-none .pn-ico, .pns-none .px-icon { --px: 32; width: calc(12px * var(--pu)) !important; height: calc(12px * var(--pu)) !important; opacity: .7; }
.pns-none.is-on { border-image-source: var(--pn-f-cardHi); background-color: #fdf0cc; box-shadow: 0 0 0 calc(1px * var(--pu)) #f2b832; }

/* ============================================================================================ Roupas / Acessórios */
.pns-mini { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: calc(3px * var(--pu)); padding: calc(1px * var(--pu)) calc(2px * var(--pu)); }
.pns-mstage { position: relative; flex: none; padding: calc(1px * var(--pu)); background: #2c160f; box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, inset 0 0 0 calc(1px * var(--pu)) #8a5a3a; }
.pns-ribbon--mini { top: calc(2px * var(--pu)); left: calc(-2px * var(--pu)); }
.pns-mname { font-family: var(--font-body, var(--font-ui)); font-size: var(--fs-body, calc(10px * var(--pu))); line-height: 1.15; }
.pns-mtier .mp-tier { display: inline-flex; align-items: center; gap: calc(1px * var(--pu)); color: var(--tier, #6a4a3e);
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); }
.pns-mtier .mp-tier__pip { width: calc(4px * var(--pu)); height: calc(4px * var(--pu)); background: var(--tier); box-shadow: 0 0 0 calc(.5px * var(--pu)) #140c1c; }
.pns-mtier .mp-tier img, .pns-mtier .mp-tier .px-icon { --px: 32; width: calc(7px * var(--pu)) !important; height: calc(7px * var(--pu)) !important; }
.pns-mline { color: #8a5a10; }

/* ============================================================================================ the sticky bar */
.pns-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: calc(1px * var(--pu));
  margin: calc(1px * var(--pu)) 0 0; padding: calc(2px * var(--pu));
  background: #3a2418; box-shadow: 0 calc(-1px * var(--pu)) 0 #140c1c, inset 0 calc(1px * var(--pu)) 0 #8a5a3a, 0 calc(-3px * var(--pu)) 0 rgba(20, 12, 28, .25); }
.pns-barrow { display: flex; align-items: center; gap: calc(2px * var(--pu)); min-width: 0; }
.pns-barrow .pns-save, .pns-barrow .pns-buy { flex: 1 1 auto; min-width: 0; }
.pns-barrow .pns-buy .ui-price, .pns-barrow .pns-buy .pn-price { white-space: nowrap; flex: none; }
.pns-barrow .pns-buy .pn-verb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pns-barrow .pns-undo { flex: none; min-width: 44px; }
.pns-bar.is-tight .pns-save > img, .pns-bar.is-tight .pns-save > .px-icon { display: none; }
.pns-outfits { display: flex; gap: calc(1px * var(--pu)); flex: none; }
.pns-outfit { position: relative; display: grid; place-items: center; width: 40px; min-height: 44px; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-body, var(--font-ui)); font-size: var(--fs-body, calc(10px * var(--pu))); color: #e8cfa8;
  border: 0; background: #54281e; box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, inset 0 calc(1px * var(--pu)) 0 #8a5a3a; touch-action: none; user-select: none; -webkit-user-select: none; }
.pns-outfit.is-set { color: #2a1408; background: #f2b832; box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, inset 0 calc(1px * var(--pu)) 0 #fff0a8, inset 0 calc(-1px * var(--pu)) 0 #a8601a; }
.pns-outfit:active { transform: translateY(calc(1px * var(--pu))); }
.pns-poor { color: #ffd8b1; text-align: center; }
.pns-lockline { color: #ffb8a8; text-align: center; }

/* ============================================================================================ Marina */
.pns-garage, .pns-boats { gap: calc(2px * var(--pu)); }
.pns-boat, .pns-gar { display: flex; flex-direction: column; gap: calc(1px * var(--pu)); padding: calc(1.5px * var(--pu)) calc(2px * var(--pu)); --tier: #b8b0a0; }
.pns-boatwell { display: grid; place-items: center; overflow: hidden; background: #1d4a4c; box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c, inset 0 calc(-2px * var(--pu)) 0 var(--tier); }
.pns-boathead { gap: 0 calc(2px * var(--pu)); }
.pns-boatname { flex: 1 1 auto; }
.pns-cls { display: inline-flex; align-items: center; padding: 0 calc(2px * var(--pu)); color: #fff1d6; background: rgba(24, 18, 48, .88);
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); white-space: nowrap;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #140c22, inset 0 calc(-1px * var(--pu)) 0 var(--tier); }
.pns-facts { color: #5a3a2a; }
.pns-modes { color: #6a4a3e; }
.pns-patri { color: #8a5a10; }
.pns-lock { display: flex; align-items: flex-start; gap: calc(1px * var(--pu)); }
.pns-lock .pn-ico { width: calc(7px * var(--pu)) !important; height: calc(7px * var(--pu)) !important; flex: none; }
.pns-boatacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: calc(1.5px * var(--pu)); }
.pns-boatacts .pn-pbtn { margin-left: auto; }
.pns-gartop { gap: calc(3px * var(--pu)); }
.pns-garwell { display: grid; place-items: center; width: calc(42px * var(--pu)); height: calc(40px * var(--pu)); padding: 0; flex: none; overflow: hidden; background-color: #cfe4ec; }
.pns-garwell .pn-ico { --px: 64; width: calc(32px * var(--pu)) !important; height: calc(32px * var(--pu)) !important; }
.pns-nameico { width: calc(8px * var(--pu)) !important; height: calc(8px * var(--pu)) !important; flex: none; opacity: .7; }
.pns-namerow { display: flex; align-items: center; gap: calc(2px * var(--pu)); }
.pns-name { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 calc(2px * var(--pu)); color: #2e1c2b; background: #fffaf0;
  border: 0; border-radius: 0; box-shadow: 0 0 0 calc(1px * var(--pu)) #2e1c2b, inset 0 calc(1px * var(--pu)) 0 #c9b99a;
  font-family: var(--font-body, var(--font-ui)); font-size: max(16px, var(--fs-body, calc(10px * var(--pu)))); }
.pns-name:focus { box-shadow: 0 0 0 calc(1px * var(--pu)) #2e1c2b, 0 0 0 calc(2px * var(--pu)) #f2b832; }
.pns-liveries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1px * var(--pu)); }
.pns-livery { min-height: 40px; min-width: 0; padding: 0 calc(1px * var(--pu)); margin: 0; cursor: pointer; border: 0; color: #e8c8a0; background: #54281e;
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); line-height: 1.1;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #2c160f, inset 0 calc(1px * var(--pu)) 0 #8a5a3a; }
.pns-livery.is-on { color: #2a1408; background: #f2b832; box-shadow: 0 0 0 calc(1px * var(--pu)) #6a3a08, inset 0 calc(1px * var(--pu)) 0 #fff0a8; }
.pns-livery.is-buy { color: #ffe07a; background: #322a5c; box-shadow: 0 0 0 calc(1px * var(--pu)) #140c22, inset 0 calc(1px * var(--pu)) 0 #5a4a86; }
.pns-qrow { display: flex; justify-content: flex-end; }
.pns-qrow .pn-pbtn { max-width: 100%; }
.pns-guests { color: #6a4a3e; }
.pns-debut { display: flex; align-items: center; gap: calc(2px * var(--pu)); padding: calc(1px * var(--pu)) calc(3px * var(--pu)); }
.pns-spin { animation: pns-spin 1.2s steps(4) infinite; }
@keyframes pns-spin { 0% { transform: translateY(0); } 50% { transform: translateY(calc(-1px * var(--pu))); } 100% { transform: translateY(0); } }
.pns-see .pns-boatwell, .pns-bought .pns-boatwell { padding: 0; background: none; box-shadow: none; }
.pns-see .pns-boatwell canvas, .pns-bought .pns-boatwell canvas { box-shadow: 0 0 0 calc(1px * var(--pu)) #140c1c; }
.pns-seewell canvas { transition: none; }

/* ============================================================================================ Extras */
.pns-xdemo { padding: calc(1px * var(--pu)) calc(2px * var(--pu)); }
.pns-xdemo .pn-ico { --px: 64; }
.pns-tagdemo { display: inline-flex; align-items: center; padding: 0 calc(3px * var(--pu)); min-height: calc(11px * var(--pu)); color: #2e1c2b; background: var(--f2, #fdf1d7);
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu)));
  box-shadow: 0 0 0 calc(1px * var(--pu)) var(--f1, #6d3e2a), 0 0 0 calc(2px * var(--pu)) #140c1c; }
.pns-wheel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(2px * var(--pu)); }
.pns-slot { display: grid; place-items: center; min-height: 56px; margin: 0; padding: 0; cursor: pointer; color: #c8bee8; border: 0; background: #1a1434;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #0e0a1c, inset 0 0 0 calc(1px * var(--pu)) #4a3a86; }
.pns-slot .pn-ico, .pns-slot .px-icon { --px: 48; width: calc(16px * var(--pu)) !important; height: calc(16px * var(--pu)) !important; }
.pns-slot.is-on { background: #322a5c; box-shadow: 0 0 0 calc(1px * var(--pu)) #0e0a1c, inset 0 0 0 calc(1px * var(--pu)) #f2b832, 0 0 0 calc(2px * var(--pu)) #f2b832; }
.pns-emotes { display: flex; flex-wrap: wrap; gap: calc(1px * var(--pu)); }
.pns-emote { display: inline-flex; align-items: center; gap: calc(1px * var(--pu)); min-height: 44px; margin: 0; padding: 0 calc(2px * var(--pu)) 0 calc(1px * var(--pu));
  cursor: pointer; color: #2e1c2b; border: 0; background: #f4e2bc; box-shadow: 0 0 0 calc(1px * var(--pu)) #8a5a3a, inset 0 calc(1px * var(--pu)) 0 #fff6e0; }
.pns-emote .pn-ico, .pns-emote .px-icon { --px: 32; width: calc(10px * var(--pu)) !important; height: calc(10px * var(--pu)) !important; }
.pns-emote:disabled { opacity: .55; cursor: default; }

/* ============================================================================================ narrow (phones) */
.app[data-layout="narrow"] .pns-ctrls > .ui-btn .ui-btn__label, .app[data-layout="narrow"] .pns-ctrls > .pn-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app[data-layout="narrow"] .pns-outfit { width: 36px; }
@media (max-width: 380px) {
  .pns-barrow { flex-wrap: wrap; }
  .pns-outfits { margin-left: auto; }
}

/* ============================================================================================ other dock panels (MP lines) */
/* Diário › Conquistas: the achievements panel mounted inside the sub-page keeps its own box */
.pnm-achhost > .pn { gap: calc(2px * var(--pu)); }

/* Mapa: players in each zone + mini portraits + "Turma aqui" */
.pnm-mapline { display: flex; align-items: center; flex-wrap: wrap; gap: calc(1px * var(--pu)) calc(2px * var(--pu)); min-height: calc(9px * var(--pu)); }
.pnm-mapline[hidden] { display: none; }
.pnm-count { display: inline-flex; align-items: center; gap: calc(1px * var(--pu)); color: #27692a;
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); }
.pnm-count .pn-ico, .pnm-count .px-icon { width: calc(7px * var(--pu)) !important; height: calc(7px * var(--pu)) !important; }
.pnm-faces { display: inline-flex; align-items: center; }
.pnm-faces > * { margin-left: calc(-2px * var(--pu)); }
.pnm-faces > *:first-child { margin-left: 0; }
.pnm-face { display: inline-grid; place-items: center; width: calc(10px * var(--pu)); height: calc(10px * var(--pu)); overflow: hidden; border-radius: 50%;
  background: #cfe4ec; box-shadow: 0 0 0 calc(.5px * var(--pu)) #2e1c2b; }
.pnm-face img { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.pnm-friends { display: inline-flex; align-items: center; gap: calc(1px * var(--pu)); padding: 0 calc(2px * var(--pu)); color: #2a1408; background: #f2b832;
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu)));
  box-shadow: 0 0 0 calc(1px * var(--pu)) #6a3a08, inset 0 calc(1px * var(--pu)) 0 #fff0a8; white-space: nowrap; }
.pnm-friends .pn-ico, .pnm-friends .px-icon { width: calc(7px * var(--pu)) !important; height: calc(7px * var(--pu)) !important; }

/* Tripulação: Bonde da Balada + guests */
.pnm-bonde { display: flex; flex-direction: column; gap: calc(1px * var(--pu)); padding: calc(1.5px * var(--pu)) calc(2px * var(--pu)); color: #f0e8ff; }
.pnm-bondetop { display: flex; align-items: center; gap: calc(2px * var(--pu)); }
.pnm-bondename { font-family: var(--font-body, var(--font-ui)); font-size: var(--fs-body, calc(10px * var(--pu))); color: #ffd8f0; }
.pnm-squad { display: inline-flex; align-items: center; padding: 0 calc(2px * var(--pu)); color: #1a0c30; background: #c8a8f0;
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu)));
  box-shadow: 0 0 0 calc(1px * var(--pu)) #140c22, inset 0 calc(1px * var(--pu)) 0 #f4eeff; white-space: nowrap; }
.pnm-squad.is-full { background: #f2b832; color: #2a1408; box-shadow: 0 0 0 calc(1px * var(--pu)) #6a3a08, inset 0 calc(1px * var(--pu)) 0 #fff0a8; }
.pnm-bondefaces { display: flex; gap: calc(1.5px * var(--pu)); }
.pnm-bface { position: relative; display: grid; place-items: center; width: calc(20px * var(--pu)); height: calc(20px * var(--pu)); padding: 0;
  background: #322a5c; box-shadow: 0 0 0 calc(1px * var(--pu)) #0e0a1c, inset 0 0 0 calc(1px * var(--pu)) #4a3a86; }
.pnm-bface .pn-ico, .pnm-bface .px-icon { --px: 32; width: calc(16px * var(--pu)) !important; height: calc(16px * var(--pu)) !important; }
.pnm-bface.is-off .pn-ico, .pnm-bface.is-off .px-icon { filter: grayscale(1) brightness(.55); }
.pnm-bface.is-on { box-shadow: 0 0 0 calc(1px * var(--pu)) #0e0a1c, inset 0 0 0 calc(1px * var(--pu)) #f2b832; }
.pnm-bface.is-home::after { content: ''; position: absolute; right: calc(1px * var(--pu)); bottom: calc(1px * var(--pu)); width: calc(3px * var(--pu)); height: calc(3px * var(--pu));
  background: #8a86a0; box-shadow: 0 0 0 calc(.5px * var(--pu)) #0e0a1c; }
.pnm-bondeline { color: #c8bee8; }
.pnm-bondeline.is-night { color: #ffd8f0; }
.pnm-guests { color: #e8cfa8; padding: 0 calc(1px * var(--pu)); }

/* Ajustes › Turma */
.pnm-people { display: flex; flex-direction: column; gap: calc(1px * var(--pu)); }
.pnm-person { display: flex; align-items: center; gap: calc(2px * var(--pu)); min-height: 44px; padding: 0 calc(1px * var(--pu)); }
.pnm-person .pn-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnm-tag { display: inline-flex; padding: 0 calc(1.5px * var(--pu)); color: #fff1d6; background: #5a4a86;
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); white-space: nowrap; }
.pnm-tag.is-block { background: #ac153b; }

/* Constelações: spend hint + Desejo line in the tide block */
.pnm-spend { display: flex; align-items: center; flex-wrap: wrap; gap: calc(1.5px * var(--pu)); padding: calc(1px * var(--pu)) calc(2px * var(--pu));
  background: rgba(242, 184, 50, .14); box-shadow: inset calc(1px * var(--pu)) 0 0 #e8a82a; }
.pnm-spend .pn-cap { flex: 1 1 60%; }
.pnm-spend .ui-btn, .pnm-spend .pn-btn { flex: none; }
.pnm-wishrow { padding: 0; }

/* Loja: "Guardando pro Desejo" chip */
.pnm-wishchip { display: inline-flex; align-items: center; gap: calc(1.5px * var(--pu)); min-height: 44px; max-width: 100%; margin: 0; padding: 0 calc(3px * var(--pu)) 0 calc(2px * var(--pu));
  cursor: pointer; border: 0; color: #fff1d6; background: rgba(24, 18, 48, .88); text-align: left;
  font-family: var(--font-small, var(--font-ui)); font-size: var(--fs-small, calc(8px * var(--pu))); line-height: 1.2;
  box-shadow: 0 0 0 calc(1px * var(--pu)) #140c22, inset 0 calc(1px * var(--pu)) 0 #5a4a86, inset calc(2px * var(--pu)) 0 0 #f07a9a; }
.pnm-wishchip .pn-ico, .pnm-wishchip .px-icon { --px: 32; width: calc(10px * var(--pu)) !important; height: calc(10px * var(--pu)) !important; flex: none; }
.pnm-wishchip .pnm-wishtxt { display: flex; flex-direction: column; min-width: 0; }
.pnm-wishchip .pnm-wishname { color: #ffe07a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnm-wishchip:hover { filter: brightness(1.1); }