:root.ui2 {
  --fr-wood: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%221%22%20y%3D%2215%22%20width%3D%2214%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%2214%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%2215%22%20y%3D%221%22%20width%3D%221%22%20height%3D%2214%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2214%22%20height%3D%223%22%20fill%3D%22%233d7be0%22/%3E%3Crect%20x%3D%221%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%223%22%20fill%3D%22%233d7be0%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%233d7be0%22/%3E%3Crect%20x%3D%2212%22%20y%3D%221%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%233d7be0%22/%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%2212%22%20height%3D%221%22%20fill%3D%22%238cc2ff%22/%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%2212%22%20fill%3D%22%238cc2ff%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%221%22%20fill%3D%22%232452a8%22/%3E%3Crect%20x%3D%2214%22%20y%3D%222%22%20width%3D%221%22%20height%3D%2212%22%20fill%3D%22%232452a8%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%2211%22%20y%3D%224%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffd84d%22/%3E%3Crect%20x%3D%2213%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffd84d%22/%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffd84d%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffd84d%22/%3E%3C/svg%3E");
  --fr-woodlt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%221%22%20y%3D%2215%22%20width%3D%2214%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%2214%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%2215%22%20y%3D%221%22%20width%3D%221%22%20height%3D%2214%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2214%22%20height%3D%223%22%20fill%3D%22%235aa0ff%22/%3E%3Crect%20x%3D%221%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%223%22%20fill%3D%22%235aa0ff%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%235aa0ff%22/%3E%3Crect%20x%3D%2212%22%20y%3D%221%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%235aa0ff%22/%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%2212%22%20height%3D%221%22%20fill%3D%22%23c4e2ff%22/%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%2212%22%20fill%3D%22%23c4e2ff%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%221%22%20fill%3D%22%232f66c2%22/%3E%3Crect%20x%3D%2214%22%20y%3D%222%22%20width%3D%221%22%20height%3D%2212%22%20fill%3D%22%232f66c2%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%2211%22%20y%3D%224%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22%231c1b3a%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffe98a%22/%3E%3Crect%20x%3D%2213%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffe98a%22/%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffe98a%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffe98a%22/%3E%3C/svg%3E");
  --fr-gold: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%221%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%221%22%20y%3D%2215%22%20width%3D%2214%22%20height%3D%221%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%2214%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%2215%22%20y%3D%221%22%20width%3D%221%22%20height%3D%2214%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2214%22%20height%3D%223%22%20fill%3D%22%23ffb627%22/%3E%3Crect%20x%3D%221%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%223%22%20fill%3D%22%23ffb627%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%23ffb627%22/%3E%3Crect%20x%3D%2212%22%20y%3D%221%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%23ffb627%22/%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%2212%22%20height%3D%221%22%20fill%3D%22%23ffe58a%22/%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%2212%22%20fill%3D%22%23ffe58a%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2212%22%20height%3D%221%22%20fill%3D%22%23c27a0e%22/%3E%3Crect%20x%3D%2214%22%20y%3D%222%22%20width%3D%221%22%20height%3D%2212%22%20fill%3D%22%23c27a0e%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%224%22%20y%3D%2211%22%20width%3D%228%22%20height%3D%221%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%2211%22%20y%3D%224%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22%233a2206%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2213%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E");
}
/* =====================================================================
   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.ui2 {
  --night: #0f1430; --iron: #1f2a55; --iron2: #2a3770; --iron3: #34448a; --rim: #3d7be0; --rim2: #8cc2ff;
  --brass: #ffc93c; --brass2: #d99a1a; --brass3: #ffe58a; --parch: #ffffff; --muted: #b3c3f0; --faint: #7a8bc4;
  --wood-out: #1c1b3a; --well: #151d44; --card: #2e3d7a; --card2: #263369;
  --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);
}
.ui2 body { font-weight: 400; letter-spacing: .005em; }

/* ---------- frames: wood border with rivets, dark warm panel inside ---------- */
.ui2 .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, #26336b, #1d2758); background-clip: padding-box; }
.ui2 .frame.brass, .ui2 .modal .box { border-image: var(--fr-woodlt) 5 fill / 6px stretch; }
.ui2 .win { background: radial-gradient(ellipse at 50% 25%, rgba(46,74,160,.97), rgba(14,20,52,.98)); }
.ui2 .win-head h2 { color: var(--brass3); text-shadow: 0 2px 0 #1c1b3a, 2px 0 0 #1c1b3a, -2px 0 0 #1c1b3a, 0 -2px 0 #1c1b3a; letter-spacing: .02em; }
.ui2 .win .col.frame { background: linear-gradient(180deg, #2a3876, #1f2a5c); background-clip: padding-box; }

/* ---------- buttons: chunky, pixel-cut corners, thicker bottom edge, press = sink ---------- */
.ui2 .btn, .ui2 .tab, .ui2 .iconbtn, .ui2 .pg, .ui2 .cd-tab, .ui2 .cd-btn {
  --bc: #4a6fd0; --bh: #8cb4ff; --bs: #2c4596; --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; }
.ui2 .btn:active:not(:disabled), .ui2 .tab:active, .ui2 .iconbtn:active, .ui2 .pg:active { transform: translateY(2px); background: linear-gradient(180deg, var(--bs) 0 2px, var(--bc) 2px); }
.ui2 .btn:disabled { filter: saturate(.25) brightness(.7); }
.ui2 .btn.primary, .ui2 .tab[aria-pressed=true], .ui2 .btn[aria-pressed=true], .ui2 .pg.on, .ui2 .cd-tab[aria-pressed=true] { --bc: #ffc22e; --bh: #ffe98a; --bs: #d58a10; --bt: #3a2206; text-shadow: 0 1px 0 rgba(255,250,220,.7); }
.ui2 .btn.go { --bc: #3cc46a; --bh: #8ff0a8; --bs: #1f8a44; --bt: #fff; }
.ui2 .btn.blue { --bc: #29b6f6; --bh: #9be3ff; --bs: #127fb8; --bt: #fff; }
.ui2 .btn.danger, .ui2 .iconbtn.close { --bc: #ff5a5a; --bh: #ffa3a3; --bs: #c22e3a; --bt: #fff; }
.ui2 .tab { --bc: #2f4596; --bh: #4a6fd0; --bs: #1f2f6e; --bt: #c9d6ff; }
.ui2 .btn.big { font-size: calc(var(--u) * 1.25); letter-spacing: .02em; }

/* ---------- cards / list rows: lighter wood-dark plate with a crisp edge ---------- */
.ui2 .card, .ui2 .li, .ui2 .dopt, .ui2 .boxc, .ui2 .rline, .ui2 .smmats .mat, .ui2 .smcard, .ui2 .qpick, .ui2 .sktools {
  background: linear-gradient(180deg, #33449a, #2a3880); 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); }
.ui2 .li[aria-current=true], .ui2 .dopt.on, .ui2 .boxc.on, .ui2 .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 ---------- */
.ui2 .slot, .ui2 .sk, .ui2 .skc {
  --q: #4a5aa0; border: 2px solid var(--wood-out); border-radius: 0; clip-path: var(--notch2);
  background: radial-gradient(circle at 50% 40%, #2c3a80, 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); }
.ui2 .slot.q0 { --q: #d9e2ff; } .ui2 .slot.q1 { --q: #5dbb4a; } .ui2 .slot.q2 { --q: #4f9ee0; } .ui2 .slot.q3 { --q: #a46ae6; } .ui2 .slot.q4 { --q: #f08c2a; } .ui2 .slot.q5 { --q: #ff5e7a; }
.ui2 .slot.sel, .ui2 .slot.picked, .ui2 .skc.on, .ui2 .sk.on { box-shadow: inset 0 0 0 2px var(--q), inset 0 0 0 4px var(--brass3); }
.ui2 .slot.empty { --q: #2a3672; opacity: .85; }
.ui2 .slot .e, .ui2 .skc .lv, .ui2 .sk .lvl { font-family: var(--f-px); font-weight: 700; color: #fff3c0; text-shadow: 1px 1px 0 #1c1b3a, -1px 0 0 #1c1b3a; }

/* ---------- inputs ---------- */
.ui2 select, .ui2 input[type=text], .ui2 input[type=number], .ui2 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 ---------- */
.ui2 .pill { border-radius: 0; clip-path: var(--notch2); font-family: var(--f-px); font-weight: 600; background: #34448a; }
.ui2 .bar { border: 2px solid var(--wood-out); border-radius: 0; background: #0e1230; box-shadow: inset 0 2px 0 rgba(0,0,0,.5); }
.ui2 .bar i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: rgba(255,255,255,.22); }
.ui2 .bar span { font-family: var(--f-px); font-weight: 700; text-shadow: 1px 1px 0 #000; }

/* ---------- HUD pieces ---------- */
.ui2 .sysbtn { font-family: var(--f-ui); }
.ui2 .sysbtn:hover, .ui2 .pad:hover { filter: brightness(1.12); }
.ui2 .hero .pt { border-radius: 0; clip-path: var(--notch2); background: radial-gradient(circle at 50% 40%, #5a8be8, #1f2a5c); box-shadow: inset 0 0 0 2px #1c1b3a; }
.ui2 .hero .role { color: var(--brass3); }
.ui2 .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%, #5a8be8, #1f2a5c); border: none; outline: none; box-shadow: inset 0 0 0 3px #1c1b3a, inset 0 0 0 5px #ffd84d; }
.ui2 .syncbtn[aria-pressed=true] { box-shadow: inset 0 0 0 3px #1c1b3a, inset 0 0 0 5px #7df0ff, 0 0 12px rgba(120,230,255,.6); }
.ui2 .skillpanel.frame { border-image: none; border: 2px solid rgba(28,27,58,.55); background: rgba(28,27,58,.22); }
.ui2 .skillpanel .sk { --q: rgba(200,225,255,.45); background: rgba(15,20,48,.3); }
.ui2 .chatdock { border: 2px solid rgba(28,27,58,.85); border-radius: 0; clip-path: var(--notch2); background: rgba(20,28,70,.55); }
.ui2 .chatdock.big { background: rgba(20,28,70,.9); border-color: #1c1b3a; box-shadow: inset 0 0 0 2px #3d7be0; }
.ui2 .target.frame { border-image: var(--fr-woodlt) 5 fill / 6px stretch; }
.ui2 .modal { background: rgba(10,14,40,.8); }
.ui2 .title .tt-box h1 { font-family: var(--f-ui); color: var(--brass3); text-shadow: 0 3px 0 #1c1b3a, 3px 0 0 #1c1b3a, -3px 0 0 #1c1b3a, 0 -3px 0 #1c1b3a; letter-spacing: .03em; }
.ui2 h3, .ui2 .ctitle { font-family: var(--f-ui); color: var(--brass3); }
.ui2 .bigpts, .ui2 .biglv { font-family: var(--f-px); color: var(--brass3); text-shadow: 2px 2px 0 #1c1b3a; }
.ui2 .sellbanner, .ui2 .skills2 .sellbanner { border-radius: 0; clip-path: var(--notch2); border-width: 2px; }
.ui2 .smres { border-radius: 0; clip-path: var(--notch2); border-width: 2px; font-family: var(--f-ui); }
.ui2 .sysbtn { border-width: 4px; border-image: var(--fr-wood) 5 fill / 4px stretch; width: calc(var(--u) * 4.1); }
.ui2 .sysbtn span { font-size: calc(var(--u) * .68); }
.ui2 .pad { border: 4px solid transparent; border-image: var(--fr-wood) 5 fill / 4px stretch; border-radius: 0; outline: none; background: linear-gradient(180deg, #34489c, #233172); background-clip: padding-box; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.ui2 .pad.boss { border-image: var(--fr-woodlt) 5 fill / 4px stretch; background: linear-gradient(180deg, #a8304a, #5a1a30); background-clip: padding-box; }
.ui2 #bMode { border-image: var(--fr-gold) 5 fill / 4px stretch; background: linear-gradient(180deg, #2fae5c, #1a6a38); background-clip: padding-box; }
.ui2 .hero.frame { border-width: 5px; border-image-width: 5px; }

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