/* =====================================================================
   UI v3 (director 22 Oct 2026): frames, buttons, tabs and item slots from the first PixelLab set
   (assets/pixellab/ui_set1_full.png, cut into 9-slice pieces in css/pl/). Sits on top of UI v2 (html.ui2.ui3).
   Switch: Settings → UI look.
   ===================================================================== */
/* ---- UI v3 colour tone (director 22 Oct 2026: "this tone, the dark navy frames feel too cramped") — soft slate-grey panels,
   plum-black outline, light grey wells; bright buttons stay. Generated from ui2.css with a colour map (tools: see DECISIONS). ---- */
/* =====================================================================
   UI v2 (director 22 Oct 2026): "workshop wood" — bright sky-blue pixel frames with gold rivets (tone revised 22 Oct: bright casual pixel look, in the spirit of Bang Bang Legion — own design),
   chunky pressable buttons, rarity-framed item wells, pixel numerals (Pixelify Sans) + round Thai (Mitr).
   Our own design: inspired by the feel of pixel ARPG menus, not copied from any game. Switch: Settings → UI.
   ===================================================================== */
:root.ui3 {
  --night: #24222e; --iron: #4a4b5d; --iron2: #555668; --iron3: #606173; --rim: #6c6d80; --rim2: #9a9bad;
  --brass: #ffc93c; --brass2: #d99a1a; --brass3: #ffe58a; --parch: #ffffff; --muted: #cfcfdb; --faint: #a2a3b4;
  --wood-out: #2a2232; --well: #34354a; --card: #5a5b6d; --card2: #505163;
  --f-ui: "Pixelify Sans", "Mitr", system-ui, sans-serif;
  --f-body: "Mitr", "Pixelify Sans", system-ui, sans-serif;
  --f-px: "Pixelify Sans", "Mitr", ui-monospace, monospace;
  --bevel: inset 0 2px 0 rgba(255,230,190,.10), inset 0 -2px 0 rgba(0,0,0,.35);
  --notch: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  --notch2: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}
.ui3 body { font-weight: 400; letter-spacing: .005em; }

/* ---------- frames: wood border with rivets, dark warm panel inside ---------- */
.ui3 .frame { border: 6px solid transparent; border-image: var(--fr-wood) 5 fill / 6px stretch; border-radius: 0; outline: none; box-shadow: 0 3px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, #5b5c6e, #4f5062); background-clip: padding-box; }
.ui3 .frame.brass, .ui3 .modal .box { border-image: var(--fr-woodlt) 5 fill / 6px stretch; }
.ui3 .win { background: radial-gradient(ellipse at 50% 25%, rgba(84,85,102,.97), rgba(36,34,46,.98)); }
.ui3 .win-head h2 { color: var(--brass3); text-shadow: 0 2px 0 #2a2232, 2px 0 0 #2a2232, -2px 0 0 #2a2232, 0 -2px 0 #2a2232; letter-spacing: .02em; }
.ui3 .win .col.frame { background: linear-gradient(180deg, #5a5b6d, #4c4d5f); background-clip: padding-box; }

/* ---------- buttons: chunky, pixel-cut corners, thicker bottom edge, press = sink ---------- */
.ui3 .btn, .ui3 .tab, .ui3 .iconbtn, .ui3 .pg, .ui3 .cd-tab, .ui3 .cd-btn {
  --bc: #6a6b80; --bh: #9a9bb0; --bs: #46475c; --bt: #fff;
  border: 2px solid var(--wood-out); border-radius: 0; outline: none; clip-path: var(--notch2);
  background: linear-gradient(180deg, var(--bh) 0 2px, var(--bc) 2px calc(100% - 4px), var(--bs) calc(100% - 4px));
  color: var(--bt); text-shadow: 0 1px 0 rgba(0,0,0,.55); box-shadow: none; font-family: var(--f-ui); font-weight: 600; transition: transform .05s; }
.ui3 .btn:active:not(:disabled), .ui3 .tab:active, .ui3 .iconbtn:active, .ui3 .pg:active { transform: translateY(2px); background: linear-gradient(180deg, var(--bs) 0 2px, var(--bc) 2px); }
.ui3 .btn:disabled { filter: saturate(.25) brightness(.7); }
.ui3 .btn.primary, .ui3 .tab[aria-pressed=true], .ui3 .btn[aria-pressed=true], .ui3 .pg.on, .ui3 .cd-tab[aria-pressed=true] { --bc: #ffc22e; --bh: #ffe98a; --bs: #d58a10; --bt: #3a2206; text-shadow: 0 1px 0 rgba(255,250,220,.7); }
.ui3 .btn.go { --bc: #3cc46a; --bh: #8ff0a8; --bs: #1f8a44; --bt: #fff; }
.ui3 .btn.blue { --bc: #29b6f6; --bh: #9be3ff; --bs: #127fb8; --bt: #fff; }
.ui3 .btn.danger, .ui3 .iconbtn.close { --bc: #ff5a5a; --bh: #ffa3a3; --bs: #c22e3a; --bt: #fff; }
.ui3 .tab { --bc: #45465a; --bh: #6a6b80; --bs: #33344a; --bt: #e6e6ee; }
.ui3 .btn.big { font-size: calc(var(--u) * 1.25); letter-spacing: .02em; }

/* ---------- cards / list rows: lighter wood-dark plate with a crisp edge ---------- */
.ui3 .card, .ui3 .li, .ui3 .dopt, .ui3 .boxc, .ui3 .rline, .ui3 .smmats .mat, .ui3 .smcard, .ui3 .qpick, .ui3 .sktools {
  background: linear-gradient(180deg, #626375, #55566a); border: 2px solid var(--wood-out); border-radius: 0; clip-path: var(--notch2);
  box-shadow: inset 0 2px 0 rgba(200,225,255,.16), inset 0 -2px 0 rgba(0,0,0,.3); }
.ui3 .li[aria-current=true], .ui3 .dopt.on, .ui3 .boxc.on, .ui3 .rline.on { box-shadow: inset 0 0 0 2px var(--brass), inset 0 -2px 0 rgba(0,0,0,.3); outline: none; }

/* ---------- item / skill wells: dark recessed square, rarity frame + bright corner pixels ---------- */
.ui3 .slot, .ui3 .sk, .ui3 .skc {
  --q: #6a6b80; border: 2px solid var(--wood-out); border-radius: 0; clip-path: var(--notch2);
  background: radial-gradient(circle at 50% 40%, #45465a, var(--well) 75%);
  box-shadow: inset 0 0 0 2px var(--q), inset 3px 3px 0 0 rgba(255,255,255,.06), inset -3px -3px 0 0 rgba(0,0,0,.35); }
.ui3 .slot.q0 { --q: #e6e6ee; } .ui3 .slot.q1 { --q: #5dbb4a; } .ui3 .slot.q2 { --q: #4f9ee0; } .ui3 .slot.q3 { --q: #a46ae6; } .ui3 .slot.q4 { --q: #f08c2a; } .ui3 .slot.q5 { --q: #ff5e7a; }
.ui3 .slot.sel, .ui3 .slot.picked, .ui3 .skc.on, .ui3 .sk.on { box-shadow: inset 0 0 0 2px var(--q), inset 0 0 0 4px var(--brass3); }
.ui3 .slot.empty { --q: #3c3d50; opacity: .85; }
.ui3 .slot .e, .ui3 .skc .lv, .ui3 .sk .lvl { font-family: var(--f-px); font-weight: 700; color: #fff3c0; text-shadow: 1px 1px 0 #2a2232, -1px 0 0 #2a2232; }

/* ---------- inputs ---------- */
.ui3 select, .ui3 input[type=text], .ui3 input[type=number], .ui3 input[type=email] { background: var(--well); border: 2px solid var(--wood-out); border-radius: 0; box-shadow: inset 0 2px 0 rgba(0,0,0,.4); clip-path: var(--notch2); }

/* ---------- pills / bars ---------- */
.ui3 .pill { border-radius: 0; clip-path: var(--notch2); font-family: var(--f-px); font-weight: 600; background: #606173; }
.ui3 .bar { border: 2px solid var(--wood-out); border-radius: 0; background: #1e1c28; box-shadow: inset 0 2px 0 rgba(0,0,0,.5); }
.ui3 .bar i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: rgba(255,255,255,.22); }
.ui3 .bar span { font-family: var(--f-px); font-weight: 700; text-shadow: 1px 1px 0 #000; }

/* ---------- HUD pieces ---------- */
.ui3 .sysbtn { font-family: var(--f-ui); }
.ui3 .sysbtn:hover, .ui3 .pad:hover { filter: brightness(1.12); }
.ui3 .hero .pt { border-radius: 0; clip-path: var(--notch2); background: radial-gradient(circle at 50% 40%, #8a8b9c, #4c4d5f); box-shadow: inset 0 0 0 2px #2a2232; }
.ui3 .hero .role { color: var(--brass3); }
.ui3 .syncbtn { border-radius: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: radial-gradient(circle at 50% 35%, #8a8b9c, #4c4d5f); border: none; outline: none; box-shadow: inset 0 0 0 3px #2a2232, inset 0 0 0 5px #ffd84d; }
.ui3 .syncbtn[aria-pressed=true] { box-shadow: inset 0 0 0 3px #2a2232, inset 0 0 0 5px #7df0ff, 0 0 12px rgba(120,230,255,.6); }
.ui3 .skillpanel.frame { border-image: none; border: 2px solid rgba(42,34,50,.55); background: rgba(42,34,50,.22); }
.ui3 .skillpanel .sk { --q: rgba(220,220,235,.45); background: rgba(30,28,40,.3); }
.ui3 .chatdock { border: 2px solid rgba(42,34,50,.85); border-radius: 0; clip-path: var(--notch2); background: rgba(45,44,58,.6); }
.ui3 .chatdock.big { background: rgba(45,44,58,.92); border-color: #2a2232; box-shadow: inset 0 0 0 2px #6c6d80; }
.ui3 .target.frame { border-image: var(--fr-woodlt) 5 fill / 6px stretch; }
.ui3 .modal { background: rgba(24,22,32,.8); }
.ui3 .title .tt-box h1 { font-family: var(--f-ui); color: var(--brass3); text-shadow: 0 3px 0 #2a2232, 3px 0 0 #2a2232, -3px 0 0 #2a2232, 0 -3px 0 #2a2232; letter-spacing: .03em; }
.ui3 h3, .ui3 .ctitle { font-family: var(--f-ui); color: var(--brass3); }
.ui3 .bigpts, .ui3 .biglv { font-family: var(--f-px); color: var(--brass3); text-shadow: 2px 2px 0 #2a2232; }
.ui3 .sellbanner, .ui3 .skills2 .sellbanner { border-radius: 0; clip-path: var(--notch2); border-width: 2px; }
.ui3 .smres { border-radius: 0; clip-path: var(--notch2); border-width: 2px; font-family: var(--f-ui); }
.ui3 .sysbtn { border-width: 4px; border-image: var(--fr-wood) 5 fill / 4px stretch; width: calc(var(--u) * 4.1); }
.ui3 .sysbtn span { font-size: calc(var(--u) * .68); }
.ui3 .pad { border: 4px solid transparent; border-image: var(--fr-wood) 5 fill / 4px stretch; border-radius: 0; outline: none; background: linear-gradient(180deg, #5d5e70, #46475a); background-clip: padding-box; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.ui3 .pad.boss { border-image: var(--fr-woodlt) 5 fill / 4px stretch; background: linear-gradient(180deg, #a8304a, #5a1a30); background-clip: padding-box; }
.ui3 #bMode { border-image: var(--fr-gold) 5 fill / 4px stretch; background: linear-gradient(180deg, #2fae5c, #1a6a38); background-clip: padding-box; }
.ui3 .hero.frame { border-width: 5px; border-image-width: 5px; }

/* text on the brighter tone: white with a navy outline for readability */
.ui3 .sysbtn span, .ui3 .hero .nm, .ui3 .ctitle, .ui3 h3, .ui3 .tab, .ui3 .btn { text-shadow: 1px 1px 0 #2a2232, -1px 0 0 #2a2232, 0 -1px 0 #2a2232; }
.ui3 .btn.primary, .ui3 .tab[aria-pressed=true], .ui3 .btn[aria-pressed=true] { text-shadow: 0 1px 0 rgba(255,250,220,.7); }
.ui3 .hint { color: #cfcfdb; }

/* ---- PixelLab pieces (recoloured to the slate tone) ---- */
.ui3 .frame, .ui3 .frame.brass, .ui3 .modal .box, .ui3 .target.frame, .ui3 .hero.frame {
  border: 12px solid transparent; border-image: url("pl/frame.png") 12 fill / 12px stretch;
  background: none; box-shadow: none; image-rendering: pixelated; }
.ui3 .win .col.frame { background: none; }
.ui3 .skillpanel.frame { border: 2px solid rgba(28,27,58,.55); border-image: none; background: rgba(28,27,58,.22); }
.ui3 .sysbtn, .ui3 .pad { border: 5px solid transparent; border-image: url("pl/frame.png") 12 fill / 6px stretch; background: none; image-rendering: pixelated; }
.ui3 .pad.boss, .ui3 #bMode { border-image: url("pl/frame.png") 12 fill / 6px stretch; }
.ui3 #bMode { background: none; }

/* buttons: the generated pills, stretched in the middle only */
.ui3 .btn.primary, .ui3 .btn[aria-pressed=true], .ui3 .pg.on, .ui3 .cd-tab[aria-pressed=true],
.ui3 .btn.go, .ui3 .btn.blue, .ui3 .btn.danger, .ui3 .iconbtn.close {
  border: 7px solid transparent; clip-path: none; background: none; box-shadow: none; image-rendering: pixelated;
  border-image: url("pl/btn_gold.png") 7 fill / 7px stretch; }
.ui3 .btn.go { border-image-source: url("pl/btn_green.png"); }
.ui3 .btn.blue { border-image-source: url("pl/btn_blue.png"); border-image-slice: 9 fill; }
.ui3 .btn.danger, .ui3 .iconbtn.close { border-image-source: url("pl/btn_red.png"); }
.ui3 .btn.primary:active:not(:disabled), .ui3 .btn.go:active:not(:disabled), .ui3 .btn.blue:active:not(:disabled), .ui3 .btn.danger:active:not(:disabled) { background: none; transform: translateY(1px); filter: brightness(.92); }
.ui3 .btn.sm.primary, .ui3 .btn.sm.go, .ui3 .btn.sm.blue, .ui3 .btn.sm.danger { border-width: 5px; border-image-width: 5px; }

/* tabs: dark tab normal, gold tab selected */
.ui3 .tab { border: 7px solid transparent; clip-path: none; background: none; image-rendering: pixelated;
  border-image: url("pl/tab_off.png") 7 fill / 7px stretch; }
.ui3 .tab[aria-pressed=true] { border-image-source: url("pl/tab_on.png"); }
.ui3 .tab:active { background: none; }

/* item slots: the generated recessed well; the rarity colour stays as an inner ring */
.ui3 .slot { border: 6px solid transparent; clip-path: none; image-rendering: pixelated;
  border-image: url("pl/slot.png") 9 fill / 6px stretch; background: none;
  box-shadow: inset 0 0 0 2px var(--q); }
.ui3 .slot.empty { box-shadow: none; opacity: 1; }
.ui3 .slot.sel, .ui3 .slot.picked { box-shadow: inset 0 0 0 2px var(--q), 0 0 0 2px var(--brass3); }
.ui3 .slot.q0 { box-shadow: none; }

/* headings in a fresh lime with a dark outline, like the reference tone */
.ui3 .win-head h2, .ui3 h3, .ui3 .ctitle { color: #c6e070; }
.ui3 .win-head h2 { text-shadow: 0 2px 0 #2a2232, 2px 0 0 #2a2232, -2px 0 0 #2a2232, 0 -2px 0 #2a2232; }