/* Anzol de Estrelas — css/social.css
 * Owner: MP14b (MP UI bay & Turma). Styles of the social DOM over the stage (chat overlay + input bar, Balão sheet,
 * emote wheel + targeted ring, Parabéns chip, Régua da Baía, viewing pill) and of the Turma panel
 * (docs/SPEC-MP.md §11.5, §11.7). Shell, HUD chip, account/onboarding modals and the profile card live in
 * css/style.css (MP14a); the Estilo panel in css/panels-mp.css (MP15). Same rules as css/style.css: skin vars,
 * --ui-px, the three bitmap-font tiers, no external resources.
 * Sections: social components (G.ui.c: chat line, portrait, tier chip, player row, item tile) · the bay layer
 * (.bay-ui: ruler, overlay, input bar, wheel, ring, Parabéns, pill, Balão) · the Balão sheet · Turma (.so-*) ·
 * accessibility modes.
 * Type: only the title / body / small tiers of css/style.css (weight 400, no italic, no letter-spacing).
 */

/* ============================================================================================== components */
/* chat / log line: [portrait 16] @handle hh:mm text (G.ui.c.chatLine; text nodes + gesture icons only) */
.mp-line {
  display: flex; align-items: flex-start; gap: calc(2px * var(--ui-px)); min-width: 0; padding: var(--u) calc(2px * var(--ui-px));
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.35; color: var(--c-text-dark);
}
.mp-line > .mp-portrait, .mp-line > .mp-line__ico { flex: 0 0 auto; margin-top: calc(-1px * var(--ui-px)); }
.mp-line__ico { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); image-rendering: pixelated; }
.mp-line__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mp-line__h {
  display: inline; min-height: 0; padding: 0; margin: 0 calc(2px * var(--ui-px)) 0 0; border: 0; background: none;
  font: inherit; color: #1f6a6a; cursor: pointer; text-decoration: none;
}
.mp-line__h:hover { color: #0f4a4a; text-decoration: underline; text-decoration-thickness: var(--u); }
.mp-line__t { margin-right: calc(3px * var(--ui-px)); color: #9a7a66; }
.mp-line__txt { white-space: pre-wrap; }
.mp-line.is-sys { color: #6a4a3e; }
.mp-line.is-sys .mp-line__txt { color: #6a4a3e; }
.mp-line.is-phrase .mp-line__txt { color: #3a5a2a; }
.mp-line.is-masked .mp-line__txt { color: #9a8a7a; }
.mp-line.is-mine .mp-line__h { color: #9a5a10; }
.mp-line.is-mention { box-shadow: inset calc(2px * var(--ui-px)) 0 0 var(--c-gold); background: rgba(242, 184, 50, .14); }
.mp-tok { display: inline-block; vertical-align: calc(-1.5px * var(--ui-px)); --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px));
  margin: 0 calc(.5px * var(--ui-px)); image-rendering: pixelated; }
.mp-tok--txt { width: auto; height: auto; padding: 0 var(--u); background: rgba(46, 28, 43, .12); vertical-align: baseline; }

/* look portrait disc (look: icon provider; the disc and ring are in the icon) */
.mp-portrait {
  --art: 24; position: relative; display: inline-block; flex: 0 0 auto;
  width: calc(var(--art) * 1px * var(--ui-px)); height: calc(var(--art) * 1px * var(--ui-px));
}
.mp-portrait__img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; max-width: none; }
.mp-portrait.is-empty { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6e0 0 30%, #e0c498 31% 60%, #c89a62 61%);
  box-shadow: 0 0 0 var(--u) #140c1c; }

/* tier chip */
.mp-tier { --tier: #b8b0a0; display: inline-flex; align-items: center; gap: var(--u); font-family: var(--font-small); font-size: var(--fs-small);
  color: var(--tier); white-space: nowrap; }
/* on parchment (the default) the metal name is darkened to read; on the dark HUD/stage chips it keeps its colour + shadow */
.mp-tier__name { filter: brightness(.72) saturate(1.2); }
.bay-ui .mp-tier__name, .sk-chip .mp-tier__name, .sk-stone .mp-tier__name { filter: none; text-shadow: 0 var(--u) 0 #140c1c; }
.mp-tier__pip { display: inline-block; width: calc(4px * var(--ui-px)); height: calc(4px * var(--ui-px)); background: var(--tier);
  box-shadow: 0 0 0 var(--u) #140c1c, inset var(--u) var(--u) 0 rgba(255, 255, 255, .45); }
.mp-tier > .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }

/* Turma player row */
.mp-prow {
  display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0;
  border-style: solid; border-width: var(--b); border-image: var(--skin-card) 6 fill / calc(6px * var(--ui-px)) round;
  border-color: #fbeed2; background-color: #fbeed2; box-shadow: 0 0 0 var(--u) var(--c-ink); color: var(--c-text-dark);
  padding: 0; margin: calc(-2px * var(--ui-px)) 0 0;
}
html.skin-on .mp-prow { background-color: transparent; }
.mp-prow.is-me { border-image-source: var(--pn-f-cardHi, var(--skin-card)); background-color: #fdf0cc; }
.mp-prow.is-pinned { box-shadow: 0 0 0 var(--u) var(--c-ink), 0 0 0 calc(2px * var(--ui-px)) #3ac8c8; }
.mp-prow.is-afk .mp-prow__main { opacity: .7; }
.mp-prow__main {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: calc(3px * var(--ui-px));
  margin: calc(-3px * var(--ui-px)) 0; padding: calc(1px * var(--ui-px)) 0; border: 0; background: none; text-align: left; color: inherit;
}
.mp-prow__col { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.mp-prow__top { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; }
.mp-prow__h { font-family: var(--font-body); font-size: var(--fs-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mp-prow.is-me .mp-prow__h { color: #9a5a10; }
.mp-prow__badge, .mp-prow__boat { display: inline-flex; flex: 0 0 auto; }
.mp-prow__badge .px-icon, .mp-prow__crown { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.mp-prow__boat .px-icon { --px: 32; width: calc(12px * var(--ui-px)); height: calc(12px * var(--ui-px)); margin: calc(-2px * var(--ui-px)) 0; }
.mp-prow__lvl { flex: 0 0 auto; font-family: var(--font-small); font-size: var(--fs-small); color: #27692a; white-space: nowrap; }
.mp-prow__sub { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; font-family: var(--font-small); font-size: var(--fs-small);
  color: var(--c-text-mid); white-space: nowrap; }
.mp-prow__st { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.mp-prow__bn { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; color: #3a5a8a; }
.mp-prow__go { flex: 0 0 auto; margin: calc(-2px * var(--ui-px)) 0; gap: var(--u); padding: 0 var(--u) 0 calc(2px * var(--ui-px)); }
.mp-prow__go > .px-icon { order: 2; --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); margin: 0; }

/* Estilo item tile (72×72 css at --ui-px 2) */
.mp-tile { --tier: #b8b0a0; position: relative; min-width: 0; }
.mp-tile__pick {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--u);
  width: 100%; min-width: calc(36px * var(--ui-px)); min-height: calc(36px * var(--ui-px)); padding: calc(2px * var(--ui-px)) var(--u) var(--u);
  border: 0; background: #e8d4a8; color: var(--c-text-dark);
  box-shadow: inset 0 0 0 var(--u) #140c1c, inset 0 0 0 calc(2px * var(--ui-px)) var(--tier), inset 0 calc(3px * var(--ui-px)) 0 rgba(255, 250, 240, .45);
}
.mp-tile__pick:hover { background: #f0dfb8; }
.mp-tile__pick:active { transform: translateY(var(--u)); }
.mp-tile__well { display: grid; place-items: center; width: calc(24px * var(--ui-px)); height: calc(24px * var(--ui-px)); }
.mp-tile__well .px-icon { --px: 48; }
.mp-tile__name { max-width: 100%; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.1; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tile__chip { display: inline-flex; align-items: center; gap: var(--u); max-width: 100%; padding: 0 var(--u);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.2; white-space: nowrap; overflow: hidden; }
.mp-tile__chip .px-icon { --px: 32; width: calc(7px * var(--ui-px)); height: calc(7px * var(--ui-px)); }
.mp-tile__chip--price { color: var(--c-money); background: rgba(24, 18, 48, .88); text-shadow: 0 var(--u) 0 #140c22;
  box-shadow: 0 0 0 var(--u) var(--tier); }
.mp-tile__chip--owned { color: #fff1d6; background: #1f7a74; box-shadow: 0 0 0 var(--u) #140c1c; }
.mp-tile__chip--using { color: #2a1408; background: var(--c-gold); box-shadow: 0 0 0 var(--u) #2a1408; }
.mp-tile__chip--lock { color: #8a3a2a; background: rgba(255, 246, 224, .7); white-space: normal; text-align: center; line-height: 1.05; }
.mp-tile__price { overflow: hidden; text-overflow: ellipsis; }
.mp-tile__pip { width: calc(2px * var(--ui-px)); height: calc(2px * var(--ui-px)); background: #e8402e; flex: 0 0 auto; }
.mp-tile__pip.is-ok { background: #6cf08a; }
.mp-tile.is-equipped .mp-tile__pick { box-shadow: inset 0 0 0 var(--u) #140c1c, inset 0 0 0 calc(2px * var(--ui-px)) var(--c-gold),
  inset 0 0 0 calc(3px * var(--ui-px)) #fff0a8; background: #f8e8b8; }
.mp-tile.is-locked .mp-tile__well { filter: grayscale(.8) brightness(.85); opacity: .75; }
.mp-tile.is-poor .mp-tile__chip--price { color: #ffb0a0; }
.mp-tile__new { position: absolute; top: calc(2px * var(--ui-px)); left: calc(2px * var(--ui-px)); width: calc(3px * var(--ui-px)); height: calc(3px * var(--ui-px));
  background: #e8402e; box-shadow: 0 0 0 var(--u) #140c1c, inset var(--u) var(--u) 0 #ffa77f; }
.mp-tile__wish {
  position: absolute; top: 0; right: 0; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; background: none;
  display: grid; place-items: start end;
}
.mp-tile__wish .px-icon { --px: 32; width: calc(7px * var(--ui-px)); height: calc(7px * var(--ui-px)); margin: calc(2px * var(--ui-px)); opacity: .55; }
.mp-tile__wish:hover .px-icon, .mp-tile__wish.is-on .px-icon { opacity: 1; }

/* ============================================================================================== the bay layer */
.bay-ui { position: absolute; z-index: 3; pointer-events: none; --ruler-h: 22px; --ruler-off: 22px; --snap: 22px; --hit-up: 13px; }
.bay-ui [data-hud-control], .bay-ui button, .bay-ui input { pointer-events: auto; }
.bay-ui kbd { font: inherit; }

/* Régua da Baía: ink α .55, 1-px top highlight; its hit area reaches --hit-up above it (visuals unchanged) */
.bay-ruler {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--ruler-h); display: flex; align-items: stretch; gap: 0;
  background: rgba(20, 12, 28, .55); box-shadow: inset 0 var(--u) 0 rgba(255, 246, 224, .22);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.bay-ruler::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--hit-up); }
.bay-ruler.is-under { visibility: hidden; }
.bay-ui.is-ruler-below .bay-ruler { bottom: auto; top: 100%; }
.bay-ruler__left {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--u); padding: 0 calc(2px * var(--ui-px)) 0 var(--u);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: #fff1d6; text-shadow: var(--sh); white-space: nowrap;
}
.bay-ruler__left .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.bay-ruler__track { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.bay-ruler__cv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.bay-ruler__right { flex: 0 0 auto; display: flex; align-items: stretch; }
.bay-rbtn {
  position: relative; display: inline-flex; align-items: center; gap: var(--u); min-height: 0; margin: 0; padding: 0 calc(2px * var(--ui-px));
  border: 0; background: none; color: #fff1d6; text-shadow: var(--sh);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; white-space: nowrap; box-shadow: inset var(--u) 0 0 rgba(255, 246, 224, .12);
}
.bay-rbtn .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.bay-rbtn:hover { background: rgba(255, 246, 224, .12); }
.bay-rbtn.is-on { background: rgba(242, 184, 50, .35); color: #fff0a8; }
.bay-rbtn__key { margin-left: var(--u); padding: 0 var(--u); color: #d8d0f0; background: rgba(255, 246, 224, .12);
  box-shadow: inset 0 calc(-1px * var(--ui-px)) 0 rgba(20, 12, 28, .6); line-height: 1.15; }
.bay-rbtn--over { order: 0; }
.bay-ui[data-layout="narrow"] .bay-rbtn--over { flex: 0 0 auto; width: 44px; justify-content: center; padding: 0; }
.bay-ui.is-compact .bay-rbtn__lab { display: none; }
.bay-ruler__track { min-width: 30%; }
.bay-ui[data-layout="narrow"] .bay-rbtn--over .bay-rbtn__lab, .bay-ui[data-layout="narrow"] .bay-rbtn--over .bay-rbtn__key { display: none; }
/* narrow: the Vista da baía button is a 44×44 touch target (it reaches up like the ruler) */
.bay-ui[data-layout="narrow"] .bay-rbtn--over::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; }
.bay-ui[data-layout="wide"] .bay-rbtn--over { order: 3; }
.bay-ui[data-layout="wide"] .bay-ruler__track { order: 1; }
.bay-ui[data-layout="wide"] .bay-ruler__right { order: 2; }

/* chat overlay (wide): bottom-left above the ruler, ≤ 45 % of the stage, lines fade after 12 s; hover → last 10 */
.bay-over {
  position: absolute; left: calc(3px * var(--ui-px)); bottom: calc(var(--ruler-off) + 3px * var(--ui-px)); max-width: 45%;
  display: flex; flex-direction: column; cursor: pointer;
}
.bay-ui.is-typing .bay-over { bottom: calc(var(--ruler-off) + 52px + 3px * var(--ui-px)); }
.bay-over__list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--u); }
.bay-over .mp-line {
  max-width: 100%; padding: 0 calc(2px * var(--ui-px)); color: #fff1d6; text-shadow: var(--sh);
  background: rgba(20, 12, 28, .62); box-shadow: 0 0 0 var(--u) rgba(20, 12, 28, .5); transition: opacity .3s steps(3, end);
}
.bay-over .mp-line > .mp-portrait { --art: 16 !important; margin-top: 0; }
.bay-over .mp-line__h { color: #8ae8d0; pointer-events: none; }
.bay-over .mp-line.is-mine .mp-line__h { color: #fff0a8; }
.bay-over .mp-line__t { display: none; }
.bay-over .mp-line.is-sys, .bay-over .mp-line.is-sys .mp-line__txt { color: #e8d8b8; }
.bay-over .mp-line.is-phrase .mp-line__txt { color: #c8f0b0; }
.bay-over .mp-line.is-mention { box-shadow: inset calc(2px * var(--ui-px)) 0 0 var(--c-gold), 0 0 0 var(--u) rgba(20, 12, 28, .5); }
.bay-over.is-hover .mp-line { opacity: 1 !important; background: rgba(20, 12, 28, .8); }

/* composer (input bar over the ruler, the sheet, Turma › Conversa) */
.bay-comp { display: flex; flex-direction: column; gap: var(--u); min-width: 0; }
.bay-comp__row { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; }
.bay-chan {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 0 0 calc(2px * var(--ui-px));
  font-family: var(--font-small); font-size: var(--fs-small); color: #fff1d6; background: #1f6a6a; text-shadow: var(--sh);
  box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #6ad8c0;
}
.bay-chan .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.bay-in {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 calc(3px * var(--ui-px)); margin: 0;
  font-family: var(--font-body); font-size: max(16px, var(--fs-body)); color: var(--c-ink);
  background: #fff6e0; border: 0; border-radius: 0; box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #d9b98a; outline: none;
}
.bay-in::placeholder { color: #9a8a7a; opacity: 1; }
.bay-in:focus { box-shadow: 0 0 0 var(--u) #140c1c, 0 0 0 calc(2px * var(--ui-px)) #f2b832, inset 0 var(--u) 0 #d9b98a; }
.bay-in:disabled { background: #e0d4bc; color: #8a7a6a; }
.bay-count { flex: 0 0 auto; font-family: var(--font-small); font-size: var(--fs-small); color: #9a7a66; }
.bay-count.is-full { color: #b8302a; }
.bay-send { flex: 0 0 auto; }
.bay-send .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.bay-ringcd { position: absolute; inset: calc(-2px * var(--ui-px)); pointer-events: none; display: none;
  background: conic-gradient(rgba(20, 12, 28, .55) calc(var(--cd, 0) * 360deg), transparent 0); }
.bay-send.is-wait .bay-ringcd { display: block; }
.bay-hint { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.25; color: #b8302a; }
.bay-bar {
  position: absolute; left: 0; right: 0; bottom: calc(var(--ruler-off) - var(--ruler-h)); padding: calc(2px * var(--ui-px)) calc(3px * var(--ui-px));
  background: rgba(20, 12, 28, .86); box-shadow: inset 0 var(--u) 0 rgba(255, 246, 224, .25);
}
.bay-bar .bay-hint { color: #ffb0a0; text-shadow: var(--sh); }
.bay-bar .bay-count { color: #d8c8b0; }
.bay-bar .bay-in { height: 34px; }

/* the emote wheel (wide): 8 × 56-css discs around a hub at the cursor */
.bay-wheel { position: absolute; width: 0; height: 0; z-index: 4; }
.bay-wheel__hub {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(34px * var(--ui-px)); height: calc(34px * var(--ui-px)); border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 28, 43, .92) 60%, rgba(20, 12, 28, .92) 61%); box-shadow: 0 0 0 var(--u) #140c1c, 0 0 0 calc(2px * var(--ui-px)) rgba(255, 246, 224, .35);
  color: #fff1d6; text-shadow: var(--sh); text-align: center; pointer-events: none;
}
.bay-wheel__name { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.05; max-width: 90%; }
.bay-wheel__to { font-family: var(--font-small); font-size: var(--fs-small); color: #8ae8d0; line-height: 1.05; }
.bay-wheel__slot, .bay-ring__slot {
  position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: calc(28px * var(--ui-px)); height: calc(28px * var(--ui-px)); min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #fff6e0 0 45%, #f4e2bc 46% 70%, #e0c498 71%);
  box-shadow: 0 0 0 var(--u) #140c1c, 0 calc(2px * var(--ui-px)) 0 rgba(20, 12, 28, .45);
  transition: transform .08s steps(2, end);
}
.bay-wheel__slot .px-icon, .bay-ring__slot .px-icon { --px: 32; width: calc(16px * var(--ui-px)); height: calc(16px * var(--ui-px)); position: relative; }
.bay-wheel__slot .bay-pose, .bay-cell .bay-pose { --px: 48; width: calc(24px * var(--ui-px)); height: calc(24px * var(--ui-px)); }
.bay-wheel__slot.is-hover, .bay-wheel__slot:hover, .bay-ring__slot:hover {
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 0 0 var(--u) #140c1c, 0 0 0 calc(2px * var(--ui-px)) #f2b832, 0 calc(2px * var(--ui-px)) 0 rgba(20, 12, 28, .45);
}
.bay-emote-txt { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-ink); line-height: 1; }
.bay-cd { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; display: none;
  background: conic-gradient(rgba(20, 12, 28, .6) calc(var(--cd, 0) * 360deg), transparent 0); }
.is-cd > .bay-cd { display: block; }

/* the targeted ring (long-press a remote character): 3 discs over a handle hub */
.bay-ring { position: absolute; width: 0; height: 0; z-index: 4; }
.bay-ring__hub {
  position: absolute; left: 0; top: calc(-41px * var(--ui-px)); transform: translate(-50%, 0); padding: 0 calc(2px * var(--ui-px));
  font-family: var(--font-small); font-size: var(--fs-small); color: #fff1d6; background: rgba(20, 12, 28, .88); text-shadow: var(--sh);
  box-shadow: 0 0 0 var(--u) #140c1c; white-space: nowrap; pointer-events: none;
}
.bay-ring__slot--0 { left: calc(-31px * var(--ui-px)); top: calc(-8px * var(--ui-px)); }
.bay-ring__slot--1 { left: 0; top: calc(-16px * var(--ui-px)); }
.bay-ring__slot--2 { left: calc(31px * var(--ui-px)); top: calc(-8px * var(--ui-px)); }
.bay-ring__lab { position: absolute; left: 50%; bottom: calc(-7px * var(--ui-px)); transform: translateX(-50%); padding: 0 var(--u);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.1; color: #fff1d6; background: rgba(20, 12, 28, .88); white-space: nowrap; }

/* Parabéns chip (6 s, one tap) */
.bay-par {
  position: absolute; left: 50%; bottom: calc(var(--ruler-off) + 6px * var(--ui-px)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: calc(2px * var(--ui-px)); min-height: 44px; padding: 0 calc(4px * var(--ui-px)) 0 calc(2px * var(--ui-px));
  border-style: solid; border-width: var(--b); border-image: var(--skin-btn) 6 fill / calc(6px * var(--ui-px)) round;
  border-color: var(--c-gold); background-color: var(--c-gold); color: #2a1408; text-shadow: 0 var(--u) 0 rgba(255, 240, 168, .7);
  box-shadow: 0 0 0 var(--u) #2a1408; overflow: hidden; animation: bay-pop .24s steps(3, end);
}
html.skin-on .bay-par { background-color: transparent; }
.bay-par .px-icon { --px: 32; width: calc(12px * var(--ui-px)); height: calc(12px * var(--ui-px)); margin: calc(-3px * var(--ui-px)) 0; }
.bay-par__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.bay-par__txt b { font-family: var(--font-body); font-size: var(--fs-body); }
.bay-par__h { font-family: var(--font-small); font-size: var(--fs-small); color: #6a3a10; }
.bay-par__bar { position: absolute; left: 0; bottom: calc(-3px * var(--ui-px)); height: var(--u); width: calc(var(--left, 1) * 100%); background: #7a4a12; }
@keyframes bay-pop { 0% { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } }

/* viewing pill: top-centre, under the HUD's top row */
.bay-pill {
  position: absolute; left: 50%; top: calc(26px * var(--ui-px)); transform: translateX(-50%); max-width: 80%;
  display: inline-flex; align-items: center; gap: var(--u); min-height: 36px; padding: 0 calc(3px * var(--ui-px)) 0 var(--u);
  border-style: solid; border-width: var(--b); border-image: var(--skin-chip) 6 fill / calc(6px * var(--ui-px)) round;
  border-color: rgba(24, 18, 48, .82); background-color: rgba(24, 18, 48, .82); box-shadow: 0 0 0 var(--u) #140c22;
  color: #fff1d6; text-shadow: var(--sh); font-family: var(--font-small); font-size: var(--fs-small); white-space: nowrap;
}
html.skin-on .bay-pill { background-color: transparent; }
.bay-pill .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); margin: calc(-3px * var(--ui-px)) 0; }
.bay-pill__txt { overflow: hidden; text-overflow: ellipsis; }
.bay-pill:hover { filter: brightness(1.15); }
.bay-ui[data-layout="narrow"] .bay-pill { min-height: 44px; }

/* Balão (narrow): a round 44-css button at the stage's bottom-right, above the ruler */
.bay-balao {
  position: absolute; right: calc(3px * var(--ui-px)); bottom: calc(var(--ruler-off) + 3px * var(--ui-px));
  width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #3a8a86 0 40%, #1f6a6a 41% 70%, #154a4a 71%);
  box-shadow: 0 0 0 var(--u) #140c1c, 0 0 0 calc(2px * var(--ui-px)) #6ad8c0, 0 calc(2px * var(--ui-px)) 0 calc(2px * var(--ui-px)) rgba(20, 12, 28, .5);
}
.bay-balao .px-icon { --px: 32; width: calc(12px * var(--ui-px)); height: calc(12px * var(--ui-px)); }
.bay-balao:active { transform: translateY(var(--u)); }
.bay-balao .bay-dot, .bay-sheet__tab .bay-dot {
  position: absolute; top: 0; right: 0; width: calc(4px * var(--ui-px)); height: calc(4px * var(--ui-px)); border-radius: 0;
  background: #e8402e; box-shadow: 0 0 0 var(--u) #140c1c, inset var(--u) var(--u) 0 #ffa77f;
}

/* ============================================================================================== the Balão sheet (narrow) */
.bay-sheet {
  position: fixed; left: 0; right: 0; z-index: 8; display: flex; flex-direction: column; min-height: 0;
  border-style: solid; border-width: var(--b); border-image: var(--skin-panel) 6 fill / calc(6px * var(--ui-px)) round;
  border-color: var(--c-wood-lt); background-color: var(--c-wood); box-shadow: 0 calc(-2px * var(--ui-px)) 0 rgba(20, 12, 28, .5);
  color: var(--c-text-light); animation: sheet-up .2s steps(4, end);
}
html.skin-on .bay-sheet { background-color: transparent; }
.bay-sheet__head { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: var(--u); padding: calc(2px * var(--ui-px)) 0 var(--u); }
.bay-sheet__grab { position: absolute; left: 50%; top: calc(-4px * var(--ui-px)); width: calc(20px * var(--ui-px)); height: calc(2px * var(--ui-px));
  transform: translateX(-50%); background: #c9955e; box-shadow: 0 var(--u) 0 #3a1e16; }
.bay-sheet__tabs { flex: 1 1 auto; display: flex; gap: var(--u); min-width: 0; }
.bay-sheet__tab {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--u);
  border: 0; background: #322a5c; color: #e6dcff; text-shadow: var(--sh);
  font-family: var(--font-small); font-size: var(--fs-small); box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #5a4a86;
}
.bay-sheet__tab.is-on { background: var(--c-paper); color: var(--c-ink); text-shadow: var(--sh-paper); box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #fff6e0; }
.bay-sheet__x { flex: 0 0 auto; width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; background: none; }
.bay-sheet__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin: var(--u) 0; }
.bay-sheet__page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(2px * var(--ui-px)); background: var(--c-paper); box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #fff6e0; color: var(--c-text-dark); }
.bay-sheet__to { font-family: var(--font-small); font-size: var(--fs-small); color: #1f6a6a; }
.bay-sheet__comp { flex: 0 0 auto; }
.bay-sheet__comp .bay-hint { color: #ffb0a0; text-shadow: var(--sh); }

/* Gestos grid: 2 × 4, 56-css cells (icon + name) */
.bay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(2px * var(--ui-px)); }
.bay-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 56px; min-width: 56px; padding: var(--u) 0; border: 0; background: #e8d4a8; color: var(--c-ink);
  box-shadow: inset 0 0 0 var(--u) #b8864a, 0 0 0 var(--u) #140c1c;
}
.bay-cell:active { transform: translateY(var(--u)); }
.bay-cell .px-icon { --px: 32; width: calc(16px * var(--ui-px)); height: calc(16px * var(--ui-px)); }
.bay-cell__lab { max-width: 100%; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bay-cell > .bay-cd { border-radius: 0; }
.bay-cell.is-sent, .bay-chip.is-sent { animation: bay-sent .5s steps(4, end); }
@keyframes bay-sent { 0% { background: #fff0a8; } 100% { } }

/* phrase chips (grouped) and channel chips */
.bay-phr { display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); }
.bay-phr__g { display: flex; flex-direction: column; gap: var(--u); }
.bay-phr__t { font-family: var(--font-small); font-size: var(--fs-small); color: #6a4a3e; }
.bay-phr__chips { display: flex; flex-wrap: wrap; gap: calc(2px * var(--ui-px)); }
.bay-phr.is-compact { flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: calc(2px * var(--ui-px)); padding-bottom: var(--u); }
.bay-phr.is-compact::-webkit-scrollbar { display: none; }
.bay-phr.is-compact .bay-phr__g, .bay-phr.is-compact .bay-phr__chips { flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; }
.bay-phr.is-compact .bay-chip { flex: 0 0 auto; }
.bay-chip {
  min-height: 36px; padding: 0 calc(3px * var(--ui-px)); border: 0; background: #fff6e0; color: var(--c-ink);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.1; white-space: nowrap;
  box-shadow: 0 0 0 var(--u) #140c1c, inset 0 calc(-1px * var(--ui-px)) 0 #d9b98a;
}
.bay-chip:hover { background: #fffbef; }
.bay-chip:active { transform: translateY(var(--u)); }
.bay-chip--ch.is-on { background: #1f6a6a; color: #fff1d6; text-shadow: var(--sh); box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #6ad8c0; }
.bay-chchips { display: flex; gap: calc(2px * var(--ui-px)); flex: 0 0 auto; }
.bay-log { display: flex; flex-direction: column; gap: 0; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.bay-log .mp-line:nth-child(even) { background: rgba(224, 196, 152, .25); }
.bay-log .mp-line.is-mention { background: rgba(242, 184, 50, .2); }
.bay-empty { padding: calc(4px * var(--ui-px)) calc(2px * var(--ui-px)); text-align: center; font-family: var(--font-small); font-size: var(--fs-small); color: #6a4a3e; }

/* ============================================================================================== Turma panel (.so-*) */
.so { display: flex; flex-direction: column; gap: calc(3px * var(--ui-px)); min-width: 0; color: var(--c-text-light); }
.so [hidden] { display: none !important; }
.so-page { display: flex; flex-direction: column; gap: calc(3px * var(--ui-px)); min-width: 0; }
.so-tabs { margin: 0; }
.so-tabs .ui-subtab { flex: 1 1 0; justify-content: center; min-height: 44px; }
.so-head { font-family: var(--font-body); font-size: var(--fs-body); color: #ffe8b8; text-shadow: var(--sh); line-height: 1.2; }
.so-cap { font-family: var(--font-small); font-size: var(--fs-small); color: #e8cfa8; line-height: 1.3; }
.so-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; }
.so-row > .ui-btn { flex: 1 1 auto; }
.so-list { display: flex; flex-direction: column; gap: calc(3px * var(--ui-px)); min-width: 0; padding-top: calc(2px * var(--ui-px)); }
.so-sec { font-family: var(--font-small); font-size: var(--fs-small); color: #ffd98a; text-shadow: var(--sh); text-transform: uppercase; margin-top: calc(2px * var(--ui-px)); }
.so-card {
  display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); min-width: 0; padding: var(--u) calc(2px * var(--ui-px));
  border-style: solid; border-width: var(--b); border-image: var(--skin-card) 6 fill / calc(6px * var(--ui-px)) round;
  border-color: #fbeed2; background-color: #fbeed2; box-shadow: 0 0 0 var(--u) var(--c-ink); color: var(--c-text-dark);
}
html.skin-on .so-card { background-color: transparent; }
.so-card__t { font-family: var(--font-body); font-size: var(--fs-body); color: var(--c-ink); }
.so-card__p { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-text-mid); line-height: 1.3; }
.so-card .ui-btn { align-self: stretch; }
/* Em outras zonas */
.so-zone { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; min-height: 44px; }
.so-zone__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.so-zone__name { font-family: var(--font-body); font-size: var(--fs-body); color: var(--c-ink); }
.so-zone__who { font-family: var(--font-small); font-size: var(--fs-small); color: #1f6a6a; overflow-wrap: anywhere; }
.so-zone .ui-btn { flex: 0 0 auto; }
.so-zone.is-locked .so-zone__name { color: #8a7a6a; }
/* Conversa: the page fills the dock body and the log takes the free height (it scrolls inside) */
.so-log { max-height: calc(150px * var(--ui-px)); min-height: calc(60px * var(--ui-px)); overflow-y: auto; padding: var(--u) 0; }
.panel.panel-social { min-height: 100%; }
.panel-social > .so.is-chat { flex: 1 1 auto; }
.so.is-chat > .so-page[data-page="chat"], .so.is-chat .so-chat { flex: 1 1 auto; min-height: 0; }
.so.is-chat .so-log { flex: 1 1 0; max-height: none; }
.so-card .bay-comp .bay-hint { color: #b8302a; }
.so-phr { margin: 0 calc(-1px * var(--ui-px)); }
/* Ranking */
.so-rchips { display: flex; flex-wrap: wrap; gap: calc(2px * var(--ui-px)); }
.so-rchips .bay-chip { flex: 1 1 auto; min-height: 40px; }
.so-rchips .bay-chip.is-on { background: var(--c-gold); color: #2a1408; box-shadow: 0 0 0 var(--u) #2a1408, inset 0 var(--u) 0 #fff0a8; }
.so-more { display: flex; flex-wrap: wrap; gap: calc(2px * var(--ui-px)); }
.so-rank { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; min-height: 44px; padding: 0 var(--u);
  border: 0; width: 100%; background: none; text-align: left; color: var(--c-text-dark); }
.so-rank:nth-child(even) { background: rgba(224, 196, 152, .3); }
.so-rank.is-you { background: rgba(242, 184, 50, .3); box-shadow: inset calc(2px * var(--ui-px)) 0 0 var(--c-gold); }
.so-rank__pos { flex: 0 0 auto; min-width: calc(12px * var(--ui-px)); text-align: center; font-family: var(--font-body); font-size: var(--fs-body); color: #6a4a3e; }
.so-rank__pos .px-icon { --px: 32; width: calc(10px * var(--ui-px)); height: calc(10px * var(--ui-px)); margin: 0 auto; }
.so-rank__medal { display: inline-grid; place-items: center; width: calc(10px * var(--ui-px)); height: calc(10px * var(--ui-px)); border-radius: 50%;
  font-family: var(--font-small); font-size: var(--fs-small); color: #2a1408; box-shadow: 0 0 0 var(--u) #140c1c, inset var(--u) var(--u) 0 rgba(255, 255, 255, .5); }
.so-rank__medal--1 { background: #f4d03a; } .so-rank__medal--2 { background: #c8ccd4; } .so-rank__medal--3 { background: #c8844a; }
.so-rank__who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--u); }
.so-rank__h { font-family: var(--font-body); font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.so-rank__who .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.so-rank__val { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--u); padding-right: var(--u);
  font-family: var(--font-body); font-size: var(--fs-body); color: #9a5a10; white-space: nowrap; }
.so-coll { flex: 0 0 auto; padding: 0 var(--u); font-family: var(--font-small); font-size: var(--fs-small); color: #4a3a76; background: rgba(138, 122, 184, .22);
  box-shadow: inset 0 0 0 var(--u) rgba(90, 74, 134, .45); white-space: nowrap; }
.so-rank__fish .px-icon { --px: 32; width: calc(12px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
/* Meu @ */
.so-me { display: flex; align-items: center; gap: calc(3px * var(--ui-px)); min-width: 0; }
.so-me__col { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.so-me__h { font-family: var(--font-title); font-size: var(--fs-title); color: var(--c-ink); line-height: 1.1; overflow-wrap: anywhere; }
.so-me__title { font-family: var(--font-small); font-size: var(--fs-small); color: #9a5a10; }
.so-me__kv { display: flex; flex-wrap: wrap; gap: 0 calc(3px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-text-mid); }
.so-me__kv b { color: var(--c-ink); font-weight: 400; }
.so-cloud { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-text-mid); }
.so-cloud .px-icon { --px: 32; width: calc(8px * var(--ui-px)); height: calc(8px * var(--ui-px)); }
.so-cloud.is-bad { color: #b8302a; }
.so-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(96px * var(--ui-px)), 1fr)); gap: calc(2px * var(--ui-px)); }
.so-btns .ui-btn { width: 100%; }

/* ============================================================================================== accessibility modes */
html.rm .bay-par, html.rm .bay-sheet, html.rm .bay-cell.is-sent, html.rm .bay-chip.is-sent { animation: none; }
html.rm .bay-over .mp-line, html.rm .bay-wheel__slot { transition: none; }
html.hc .bay-ruler { background: rgba(20, 12, 28, .92); }
html.hc .bay-over .mp-line { background: rgba(20, 12, 28, .95); }
html.hc .bay-over .mp-line.is-sys, html.hc .bay-over .mp-line.is-sys .mp-line__txt { color: #fff1d6; }