/* =====================================================================
   UI v5 "Meshy pixel" (director 24 Oct 2026). Sits on top of v4 (html.ui4.ui5): v4 keeps the palette, font and
   layout fixes; v5 swaps the drawn surfaces for the Meshy pieces in css/ui5/ (made by tools/ui5_import.py).
   Every piece is 9-slice (border-image) and drawn with nearest-neighbour, one art pixel = 1 css px.
   No text in any piece: the game writes all labels.
   Director's fixes 24 Oct 2026: panels = paper texture (CSS) · thin rim 5 px, no rivets (frame_thin.png, rows cut by the
   import tool) · the whole set drawn at 1 art px = 1 css px so every rim is equally light · hero cards show the whole hero.
   ===================================================================== */
:root.ui5 {
  --px: 1px;                 /* one art pixel (was 2 px on tall screens; director 24 Oct: "กรอบหนาไป" → the whole set is drawn at 1) */
  --spx: 1px;
  /* panel paper: two layers of faint dots on cream (no picture needed) */
  /* director 24 Oct: "จุดเยอะไปเอาออก" (twice) → one sparse, paler layer: a dot every 44 px */
  --paper: radial-gradient(circle, #e6d2ae 0 1px, transparent 1.6px) 0 0 / 44px 44px,
           linear-gradient(180deg, #fff9ea, #fbf0d8);
  --paper-in: inset 0 0 8px rgba(91,66,58,.18);
  --cocoa: #5b423a; --k-line: #5b423a;
  --k-cream: #faf2d9;
}

.ui5 .frame, .ui5 .btn, .ui5 .tab, .ui5 .iconbtn, .ui5 .pg, .ui5 .slot, .ui5 .sk, .ui5 .skc, .ui5 .bar, .ui5 .sysbtn,
.ui5 .pad, .ui5 .hero, .ui5 .prof, .ui5 .pl-map, .ui5 .target, .ui5 .win-head h2, .ui5 .cd-btn, .ui5 .syncbtn { image-rendering: pixelated; }

/* ---------- A  panels: thin cocoa + brown rim (5 px), stitch line, paper texture inside ---------- */
.ui5 .frame, .ui5 .modal .box, .ui5 .pad, .ui5 .pl-map {
  /* director 24 Oct: "ห้ามมีเหลี่ยมมุม ลบมุมให้หมด · ลดความหนาลง 1 · สีอ่อนลง" → 4 px rounded rim drawn in CSS
     (soft cocoa line 1 px + light brown 3 px), stitch line kept as a dashed inner line */
  border: 3px solid #b08f75; border-radius: 10px; outline: 1px dashed #dcc29c; outline-offset: -7px; border-image: none;
  background: var(--paper); background-clip: padding-box; box-shadow: 0 0 0 1px #8a6a54, var(--paper-in), 0 2px 0 1px rgba(91,66,58,.16); filter: none; }
.ui5 .win .col.frame { background: var(--paper); background-clip: padding-box; padding: 9px 10px; }
.ui5 .modal .box { padding: 10px 12px; }
/* the column's first title: plain cocoa text on a beige band (the ribbon is kept for the window title) */
.ui5 .win .col.frame > h3:first-child, .ui5 .win .col.frame > .ctitle:first-child { border: 0; border-radius: 0; padding: 0 calc(var(--px) * 4);
  background: linear-gradient(#ecd5a9, #ecd5a9) 0 100% / 100% calc(var(--px) * 1) no-repeat; box-shadow: none; }

/* window: green garden only (the beige header band of v4 goes; the title sits on the ribbon instead) */
.ui5 .win { background: var(--k-check), radial-gradient(ellipse at 50% 20%, #c7e49c, #9fca70 80%); }

/* ---------- B  ribbon: the window title, dipping over the top edge of the panels below ---------- */
.ui5 .win-head { position: relative; z-index: 2; }
.ui5 .win-head h2 {
  box-sizing: border-box; height: calc(var(--px) * 30); margin: 0 0 calc(var(--px) * -10); font-size: min(calc(var(--u) * 1.3), 19px);
  display: flex; align-items: center;
  border: 0 solid transparent; border-width: 0 calc(var(--px) * 22);
  border-image: url("ui5/ribbon.png") 0 22 fill / 0 calc(var(--px) * 22) round stretch;
  padding: 0 calc(var(--px) * 2) calc(var(--px) * 6); text-shadow: 0 1px 0 #fff8e6; color: var(--cocoa); line-height: 1; }
.ui5 .win-ico { margin-right: calc(var(--px) * -2); }

/* ---------- C  buttons (5 colours). The 2 px cocoa base is in the art; pressing swaps to the sunk art ---------- */
.ui5 .btn, .ui5 button.btn, .ui5 .iconbtn, .ui5 .pg, .ui5 .cd-btn {
  --bi: url("ui5/btn_cream.png"); --bd: url("ui5/btn_cream_down.png");   /* neutral = cream (no grey buttons · 24 Oct) */
  border-style: solid; border-color: transparent; border-radius: 0; outline: none; box-shadow: none; background: none;
  border-width: calc(var(--px) * 3) calc(var(--px) * 4) calc(var(--px) * 6);
  border-image: var(--bi) 4 5 6 5 fill / calc(var(--px) * 4) calc(var(--px) * 5) calc(var(--px) * 6) round stretch;
  color: var(--k-ink); text-shadow: 0 1px 0 rgba(255,255,255,.55); transition: none; }
.ui5 .btn:active:not(:disabled), .ui5 .iconbtn:active, .ui5 .pg:active, .ui5 .cd-btn:active {
  transform: none; box-shadow: none; border-image-source: var(--bd);
  border-top-width: calc(var(--px) * 5); border-bottom-width: calc(var(--px) * 4); }
.ui5 .btn:hover, .ui5 .iconbtn:hover, .ui5 .pg:hover { filter: brightness(1.05); }
.ui5 .btn:disabled { filter: saturate(.55) opacity(.55); }   /* faded, not grey */
.ui5 .btn.primary, .ui5 .btn[aria-pressed=true], .ui5 .pg.on { --bi: url("ui5/btn_gold.png"); --bd: url("ui5/btn_gold_down.png"); color: #5a3a10; }
.ui5 .btn.go { --bi: url("ui5/btn_green.png"); --bd: url("ui5/btn_green_down.png"); color: #fff; text-shadow: 0 1px 0 rgba(40,90,40,.7); }
.ui5 .btn.blue { --bi: url("ui5/btn_blue.png"); --bd: url("ui5/btn_blue_down.png"); color: #fff; text-shadow: 0 1px 0 rgba(40,60,140,.7); }
.ui5 .btn.danger, .ui5 .floors .btn.boss { --bi: url("ui5/btn_red.png"); --bd: url("ui5/btn_red_down.png"); color: #fff; text-shadow: 0 1px 0 rgba(140,50,30,.7); }

/* ---------- D  tabs: beige off, purple on; the chosen one stands 2 art px taller ---------- */
.ui5 .tab {
  border-style: solid; border-color: transparent; border-radius: 0; outline: none; box-shadow: none; background: none;
  border-width: calc(var(--px) * 3) calc(var(--px) * 4) calc(var(--px) * 3);
  border-image: url("ui5/tab_off.png") 6 fill / calc(var(--px) * 6) round stretch;
  color: var(--k-ink2); text-shadow: none; transition: none; }
.ui5 .tab[aria-pressed=true] { border-image-source: url("ui5/tab_on.png"); color: #fff; text-shadow: 0 1px 0 rgba(60,40,140,.7);
  transform: translateY(calc(var(--px) * -2)); }
.ui5 .tab:active { transform: translateY(calc(var(--px) * 1)); box-shadow: none; }
.ui5 .tab[aria-pressed=true]:active { transform: translateY(calc(var(--px) * -1)); }
.ui5 .win-tabs, .ui5 .win-chars { padding-top: calc(var(--px) * 2); }

/* ---------- E  wells: empty well + rarity rings (white green blue purple orange; red = recoloured orange) ---------- */
.ui5 .slot, .ui5 .sk, .ui5 .skc {
  --q: #8a6a54; border: 0; border-image: none; border-radius: 6px; background: #f7ead0;
  box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q); }
/* wells (director 24 Oct 2026: 5 px rim, "ไม่มีสี่เหลี่ยมข้างใน", "ไม่มีช่องว่างในกรอบ"): the Meshy well's own colours —
   cocoa outline · brown ×2 · dark brown · rarity ring — as solid 1 px bands. The piece's rings are drawn in light/dark
   segments, which read as gaps in the frame, so each ring is one solid colour here. */
.ui5 .slot.q0 { --q: #e6e9f2; } .ui5 .slot.q1 { --q: #8fde84; } .ui5 .slot.q2 { --q: #64bae9; }
.ui5 .slot.q3 { --q: #9a7ae8; } .ui5 .slot.q4 { --q: #f5a03c; } .ui5 .slot.q5 { --q: #f26b8a; }
.ui5 .slot.empty { opacity: 1; }
.ui5 .slot.q0, .ui5 .slot.q1, .ui5 .slot.q2, .ui5 .slot.q3, .ui5 .slot.q4, .ui5 .slot.q5, .ui5 .slot.empty {
  box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q); }
/* director 27 Oct 2026: the rarity colour was hard to read → 2 px thicker, growing INTO the well (the outer rim and the grid stay the same) */
.ui5 .slot.q0, .ui5 .slot.q1, .ui5 .slot.q2, .ui5 .slot.q3, .ui5 .slot.q4, .ui5 .slot.q5 {
  box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 6px var(--q); }
.ui5 .slot.sel, .ui5 .slot.picked, .ui5 .skc.on, .ui5 .sk.on { outline: calc(var(--spx) * 2) solid var(--k-purple); outline-offset: calc(var(--spx) * -1); }
.ui5 .sk.active { outline: 2px solid #6cc767; outline-offset: -1px; }
.ui5 .sk.perm { outline: 2px solid var(--k-yellow3); outline-offset: -1px; }
.ui5 .slot .e, .ui5 .skc .lv, .ui5 .sk .lvl { text-shadow: 1px 1px 0 var(--cocoa), -1px 0 0 var(--cocoa), 0 -1px 0 var(--cocoa); }

/* ---------- F  bars: dark track + the coloured fill art, cut at the percentage (the <i> clips a full-width fill) ---------- */
.ui5 .bar { container-type: inline-size; border: 0 solid transparent; border-radius: 0; box-shadow: none; background: none; overflow: hidden;
  border-image: url("ui5/bar_track.png") 4 6 fill / calc(var(--spx) * 4) calc(var(--spx) * 6) round stretch; }
.ui5 .bar i { --fi: url("ui5/bar_hp.png"); inset: 0 auto 0 0; border-radius: 0; background: none; overflow: hidden; }
.ui5 .bar i::after { content: none; }
.ui5 .bar i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100cqw;
  border: 0 solid transparent; border-image: var(--fi) 4 6 fill / calc(var(--spx) * 4) calc(var(--spx) * 6) round stretch; }
.ui5 .bar.mp i { --fi: url("ui5/bar_mp.png"); } .ui5 .bar.xp i, .ui5 .bar.perkbar i { --fi: url("ui5/bar_xp.png"); }
.ui5 .bar.tg i, .ui5 .bar.hp i { --fi: url("ui5/bar_hp.png"); } .ui5 .bar.tg.boss i { --fi: url("ui5/bar_alt.png"); }
.ui5 .bar i.sh { --fi: none; background: rgba(190,225,255,.55); left: auto; right: 0; } .ui5 .bar i.sh::before { content: none; }
.ui5 .bar.xp { height: calc(var(--spx) * 10); }
.ui5 .bar span { z-index: 1; padding-left: calc(var(--spx) * 6); color: #fff; text-shadow: 1px 1px 0 var(--cocoa), -1px 0 0 var(--cocoa), 0 -1px 0 var(--cocoa), 1px 0 0 var(--cocoa); }

/* ---------- G  small round buttons ---------- */
.ui5 .iconbtn.close, .ui5 #winHelp, .ui5 [data-act=skMoveL], .ui5 [data-act=skMoveR] {
  border: 0; border-image: none; background: var(--ri) center / contain no-repeat; font-size: 0; color: transparent; text-shadow: none;
  width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); min-width: 0; min-height: 0; padding: 0; }
.ui5 .iconbtn.close { --ri: url("ui5/round_x.png"); }
.ui5 #winHelp { --ri: url("ui5/round_help.png"); }
.ui5 [data-act=skMoveL] { --ri: url("ui5/round_left.png"); width: calc(var(--spx) * 26); height: calc(var(--spx) * 25); }
.ui5 [data-act=skMoveR] { --ri: url("ui5/round_right.png"); width: calc(var(--spx) * 26); height: calc(var(--spx) * 25); }
.ui5 .iconbtn.close:active, .ui5 #winHelp:active, .ui5 [data-act=skMoveL]:active:not(:disabled), .ui5 [data-act=skMoveR]:active:not(:disabled) { transform: translateY(1px); border: 0; }
.ui5 [data-act=skMoveL]:disabled, .ui5 [data-act=skMoveR]:disabled { filter: saturate(.5) opacity(.45); }
/* bag pages you do not own yet: grey button with the grey lock */
.ui5 .inv .pg.lock { font-size: 0; opacity: 1; background: url("ui5/round_lock.png") center / auto calc(var(--spx) * 20) no-repeat; }
.ui5 .inv .pg { min-height: calc(var(--spx) * 26); }

/* ---------- H  HUD plates ---------- */
.ui5 .hud .plate.frame { border: 0; border-image: none; filter: none; padding: 0; background: none; box-shadow: none; gap: calc(var(--px) * 2); }
/* H1 profile: the round photo well on the left, the name bar to the right (fixed height so the circle stays round) */
.ui5 .prof { box-sizing: border-box; height: calc(var(--px) * 27); padding: 0 calc(var(--px) * 6) 0 calc(var(--px) * 5);
  border: 0 solid transparent; border-image: url("ui5/hud_profile.png") 0 7 0 31 fill / 0 calc(var(--px) * 7) 0 calc(var(--px) * 31) stretch stretch;   /* slices past the bar's rounded ends + stretch: repeating the middle copied the end's dotted edge into vertical dotted lines (fix 24 Oct) */
  gap: calc(var(--px) * 5); justify-self: start; min-width: calc(var(--px) * 88); }
.ui5 .prof img { width: calc(var(--px) * 19); height: calc(var(--px) * 19); border: 0; box-shadow: none; background: none; margin-right: calc(var(--px) * 3); }
.ui5 .prof .pf-name { color: var(--cocoa); }
.ui5 .prof .dot { left: calc(var(--px) * 18); top: calc(var(--px) * 1); }
/* the wallet / where-am-I strip under it: the thin panel stretched into a strip */
.ui5 .pl-map { padding: 4px 8px; }
.ui5 .pl-wallet .ico { image-rendering: pixelated; }
/* H2 target: name band on top; our HP bar lies over the groove at the bottom */
.ui5 .target.frame { border: 0 solid transparent; filter: none; position: absolute; background: none; box-shadow: none;
  border-image: url("ui5/hud_target.png") 5 8 10 fill / calc(var(--px) * 5) calc(var(--px) * 8) calc(var(--px) * 10) round stretch;
  padding: calc(var(--px) * 6) calc(var(--px) * 9) calc(max(calc(var(--px) * 9), calc(var(--u) * 1.25)) + var(--px) * 5); }
.ui5 .target .bar.tg { position: absolute; left: calc(var(--px) * 5); right: calc(var(--px) * 5); bottom: calc(var(--px) * 2); height: max(calc(var(--px) * 9), calc(var(--u) * 1.25)); }
.ui5 .target .bar.tg span { line-height: max(calc(var(--px) * 9), calc(var(--u) * 1.25)); }
/* H3 hero card (director 24 Oct: "รูปตัวละครทั้งตัว ช่องกว้างขึ้น"): thin panel; a tall well on the left about twice as wide as
   before, holding the whole hero (the picture is cropped to the body, so it fills the well's height); name, level, HP/MP on the right */
.ui5 .hero.frame { padding: 4px 6px 4px 4px; grid-template-columns: calc(var(--u) * 4.6) minmax(0, 1fr); column-gap: calc(var(--u) * .45);
  min-height: calc(var(--u) * 5.8); align-content: center; }
.ui5 .hero .pt { grid-row: 1 / span 4; align-self: stretch; aspect-ratio: auto; height: auto; min-height: calc(var(--u) * 4.9);
  --q: #8a6a54; border: 0; border-image: none; border-radius: 6px; background: #f7ead0;
  box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q); display: grid; place-items: center; overflow: hidden; }
.ui5 .hero .pt { position: relative; }
.ui5 .hero .pt img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; }
.ui5 .hero .bar span { font-size: calc(var(--u) * .7); }
.ui5 .hero[aria-pressed=true] { box-shadow: 0 0 0 1px #8a6a54, 0 0 0 3px var(--k-purple), var(--paper-in), 0 2px 0 3px rgba(91,66,58,.16); }   /* chosen card: purple ring outside; the dashed stitch stays (director 24 Oct: both cards the same frame) */

/* top-right system buttons: well + the Meshy menu icon */
.ui5 .sysbtn.frame { --q: #8a6a54; border: 0; border-image: none; outline: none; border-radius: 8px; background: #f7ead0; padding: 4px;
  box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q), 0 1px 0 rgba(91,66,58,.25); filter: none; }
.ui5 .sysbtn img { image-rendering: pixelated; object-fit: contain; }
.ui5 .sysbtn span { color: var(--cocoa); text-shadow: 0 1px 0 #fff8e6; }

/* field pads (buff / skills / potion / boss): the thin panel; on / boss-ready take the green / red button art */
.ui5 .pad.on, .ui5 #bMode.on { background: none; box-shadow: none; border-image: url("ui5/btn_green.png") 4 5 6 5 fill / 4px 5px 6px round stretch; }
.ui5 .pad.boss.ready { background: none; box-shadow: none; border-image: url("ui5/btn_red.png") 4 5 6 5 fill / 4px 5px 6px round stretch; }
.ui5 .pad.boss, .ui5 .pad.boss.in { background: var(--paper); background-clip: padding-box; }

/* sync button / dock chat tabs */
.ui5 .cd-tab { border-radius: 0; }

/* money + menu icons are now real pixel pictures: keep them square-ish and crisp */
.ui5 img.ico { image-rendering: pixelated; object-fit: contain; }

/* the profile plate + wallet strip are taller than v4's plate, so the chat dock starts under them */
.ui5 .chatdock { top: calc(var(--safe-t) + var(--px) * 29 + var(--u) * 2.75 + 24px); }
.ui5 .chatdock.big { top: calc(var(--safe-t) + var(--px) * 29 + var(--u) * 2.75 + 24px); }
/* the profile plate is drawn at 1 art px (27 px tall) since 24 Oct: keep the name inside its bar */
.ui5 .prof .pf-name { font-size: min(calc(var(--u) * 1), 13px); line-height: 1; }
.ui5 .prof .pf-lv { font-size: min(calc(var(--u) * .75), 11px); line-height: 1; }
.ui5 .chatdock, .ui5 .chatdock.big { top: calc(var(--safe-t) + 31px + var(--u) * 2.75 + 22px); }
/* grids of wells: a soft brown floor under the whole grid, rounded wells on top (director 24 Oct 2026:
   "วางพื้นเต็มก่อนค่อยวางกรอบ", then "ห้ามมีเหลี่ยมมุม"); the floor only shows in the round corners and a 1 px seam */
.ui5 .invgrid, .ui5 .smgrid, .ui5 .skgrid { gap: 1px; padding: 2px; background: #d7bd98; border-radius: 8px; }
/* the field skill bar (Active / Buff): same 5 px wells — v4's lighter skill-bar rules must not win here (fix 24 Oct 2026) */
.ui5 .skillpanel .sk, .ui5 .skillpanel .sk.empty { --q: #8a6a54; opacity: 1; border: 0; border-radius: 6px; background: #f7ead0;
  box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q); }
.ui5 .skillpanel .sk.active, .ui5 .sk.active { --q: #5cc05a; outline: 0; box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q); }
.ui5 .skillpanel .sk.perm, .ui5 .sk.perm { --q: #ffcf4a; outline: 0; box-shadow: inset 0 0 0 1px #8a6a54, inset 0 0 0 2px #b8957a, inset 0 0 0 3px #9c7a63, inset 0 0 0 4px var(--q); }

/* pictures keep their own shape: an icon that is wider or taller than its box is fitted, never stretched (friends, perks) */
.ui5 img { object-fit: contain; }
/* tall pictures (the slim potion bottle) stay inside their well */
.ui5 .slot > img { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; object-fit: contain; }

/* DUET locked: faded, not grey (24 Oct) */
.ui5 .syncbtn.locked { filter: saturate(.5); opacity: .5; }

/* ---------- neutral buttons = the pastel (UI v4) button, drawn in CSS (director 24 Oct: "ปุ่มเทาให้เป็นแบบเวอร์ชันพาสเทล")
   beige face, cocoa line, white inner rim, darker beige lip; the coloured buttons (gold green blue red) keep the Meshy art ---------- */
.ui5 .btn:not(.primary):not(.go):not(.blue):not(.danger):not(.boss):not([aria-pressed=true]):not([data-act=skMoveL]):not([data-act=skMoveR]),
.ui5 .pg:not(.on):not(.lock), .ui5 .cd-btn, .ui5 .iconbtn:not(.close):not(#winHelp) {
  --bi: none; --bd: none; border-image: none;
  border: 2px solid var(--k-line); border-radius: var(--k-r2);
  background: linear-gradient(180deg, #fff6dc, var(--k-beige) 45%, var(--k-beige) calc(100% - 4px), var(--k-beige2) calc(100% - 4px));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 2px 0 rgba(122,90,68,.3);
  color: var(--k-ink); text-shadow: none; }
.ui5 .btn:not(.primary):not(.go):not(.blue):not(.danger):not(.boss):not([aria-pressed=true]):not([data-act=skMoveL]):not([data-act=skMoveR]):active:not(:disabled),
.ui5 .pg:not(.on):not(.lock):active, .ui5 .cd-btn:active, .ui5 .iconbtn:not(.close):not(#winHelp):active {
  border-width: 2px; transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

/* ---------- top-left profile plate bigger (director 24 Oct: "โปรไฟล์ซ้ายบนเล็กไป ขยาย") ----------
   the plate is drawn at --pp art px per css px (about 1.5–2 on a computer, 1.25 on a phone) instead of 1 */
:root.ui5 { --pp: clamp(1.6px, calc(var(--u) * .18), 2.6px); }   /* director 24 Oct (2nd): taller, the name must not touch the bar's top/bottom */
.ui5 .prof { --px: var(--pp); }
.ui5 .prof .pf-name { font-size: min(calc(var(--u) * 1.25), 19px); }
.ui5 .prof .pf-lv { font-size: min(calc(var(--u) * .9), 14px); }
.ui5 .hud .plate.frame { outline: none; gap: 8px; }   /* the plate is only a holder: no dashed stitch running through the profile and the map strip */
.ui5 .chatdock, .ui5 .chatdock.big { top: calc(var(--safe-t) + var(--pp) * 27 + 8px + var(--u) * 2.75 + 32px); }

/* big buttons (shop "buy" etc.): icon and text centred in the face; the art's bottom lip is 3 px thicker than its top, so nudge down */
.ui5 .btn.big { display: inline-flex; align-items: center; justify-content: center; gap: .35em; line-height: 1; padding-top: 4px; padding-bottom: 0; }
.ui5 .hero.frame, .ui5 .hero.frame[aria-pressed=true] { outline: 1px dashed #dcc29c; outline-offset: -7px; }   /* same stitch on both cards (style.css recoloured the chosen one's outline) */
/* name and level sit on one line, both centred on the bar (director 24 Oct: "ชื่อกับเลเวลไม่อยู่กึ่งกลาง"); the pixel font draws digits high, so the level drops .15em */
.ui5 .prof { align-items: center; }
.ui5 .prof .pf-name, .ui5 .prof .pf-lv { display: block; line-height: 1; margin: 0; padding: 0; }
.ui5 .prof { gap: 0; padding: 0 calc(var(--pp) * 13) 0 calc(var(--pp) * 4.5); }
.ui5 .prof img { margin-right: 0; }
/* equal space left and right of the text inside the bar: bar starts ~31 art px from the left, ends 7 from the right; 6 px air each side */
.ui5 .prof .pf-name { margin-left: calc(var(--pp) * 13.5); transform: translateY(.12em); }   /* the pixel font draws Thai high in its box */
.ui5 .prof .pf-lv { margin-left: calc(var(--pp) * 5); transform: translateY(.24em); }