/* =====================================================================
   UI v4 "cozy pastel" (director 22 Oct 2026: "อยากได้โทนสีเกมเป็นโทนนี้ · พื้นหลัง GUI โล่งไป ลองออกแบบแบบเบาๆ มินิมอล
   ไม่รกตาแต่ไม่โล่งแบบไม่มีอะไรเลย"). Tone taken from a reference screenshot (colours only, our own shapes):
   cream paper panels, soft warm-brown outline, grass green, round chunky buttons with a white rim.
   Panels get quiet texture instead of flat fill: a faint dot grid, a stitched inner line, a beige header band,
   a soft green checker behind windows. Standalone on top of style.css (html.ui4, no ui2/ui3). Switch: Settings → UI look.
   ===================================================================== */
:root.ui4 {
  color-scheme: light;
  /* palette */
  --k-ink: #5c4433; --k-ink2: #8a6e58; --k-ink3: #ae967e;        /* text: dark cocoa → light */
  --k-line: #7a5a44;                                              /* outline */
  --k-paper: #fff9ea; --k-paper2: #fbf0d8; --k-beige: #f1dfba; --k-beige2: #e4c995; --k-tan: #d6b27c;
  --k-grass: #b5d886; --k-grass2: #9cc96c; --k-grass3: #7aae4e; --k-leaf: #cfe8a6;
  --k-purple: #8d74e8; --k-purple2: #b8a8ff; --k-purple3: #6a52c8;
  --k-blue: #6f94f2; --k-blue2: #a9c2ff; --k-blue3: #4c6fd0;
  --k-yellow: #ffd35a; --k-yellow2: #ffe9a0; --k-yellow3: #e7a92a;
  --k-green: #6cc767; --k-green2: #a8e6a0; --k-green3: #44a046;
  --k-coral: #ff8a6e; --k-coral2: #ffc0ae; --k-coral3: #e0583f;
  --k-pink: #f6a2bc;
  /* the base sheet's tokens, re-pointed so every untouched rule follows the light tone */
  --night: #a9cf7c; --iron: var(--k-paper2); --iron2: var(--k-beige); --iron3: var(--k-beige2); --rim: var(--k-line); --rim2: var(--k-tan);
  --brass: var(--k-yellow3); --brass2: #c58a2a; --brass3: #b0741a; --parch: var(--k-ink); --muted: var(--k-ink2); --faint: var(--k-ink3);
  --hp: #f26b55; --mp: #5f8ff0; --xp: #8ccf4e; --bad: #e0583f; --good: #3f9a3c; --gem: #8d74e8;
  --c0: #8a7a6a; --c1: #3f9a3c; --c2: #3f7fd8; --c3: #8a5ad8; --c4: #e07a1a; --c5: #e04866;
  --f-ui: "Mitr", "IBM Plex Sans Thai", system-ui, sans-serif;
  --f-body: "Mitr", "IBM Plex Sans Thai", system-ui, sans-serif;
  --f-px: "Pixelify Sans", "Mitr", ui-monospace, monospace;
  --bevel: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(122,90,68,.12);
  /* textures (tiny, low-contrast) */
  --k-dots: radial-gradient(circle, rgba(150,110,70,.13) 1.1px, transparent 1.6px) 0 0 / 14px 14px;
  --k-check: repeating-conic-gradient(rgba(255,255,255,.16) 0 25%, transparent 0 50%) 0 0 / 44px 44px;
  --k-r: 12px; --k-r2: 8px;
}
.ui4 body { font-weight: 400; color: var(--k-ink); }
.ui4 html, .ui4 body { background: var(--night); }

/* ---------- panels: cream paper, brown outline, soft drop, stitched inner line, faint dot grid ---------- */
.ui4 .frame {
  background: var(--k-dots), linear-gradient(180deg, var(--k-paper), var(--k-paper2));
  border: 2px solid var(--k-line); outline: 2px dashed rgba(122,90,68,.18); outline-offset: -7px;
  border-radius: var(--k-r); box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(122,90,68,.28), 0 6px 14px rgba(90,70,40,.12); color: var(--k-ink); }
.ui4 .frame.brass, .ui4 .modal .box { border-color: var(--k-line); }

/* windows: green garden behind, soft checker like floor tiles; the window header is a beige band */
.ui4 .win { --hb: calc(var(--safe-t) + var(--u) * 3.75);
  background: linear-gradient(180deg, #f8e9c8, #ecd5a6) 0 0 / 100% var(--hb) no-repeat,
    linear-gradient(var(--k-line), var(--k-line)) 0 var(--hb) / 100% 2px no-repeat,
    linear-gradient(rgba(122,90,68,.16), rgba(122,90,68,0)) 0 calc(var(--hb) + 2px) / 100% 6px no-repeat,
    var(--k-check), radial-gradient(ellipse at 50% 20%, #c7e49c, #9fca70 80%); color: var(--k-ink); }
.ui4 .win-head h2 { color: var(--k-ink); font-family: var(--f-ui); font-weight: 600; text-shadow: 0 2px 0 #fff; letter-spacing: 0; }
.ui4 .win .col.frame { background: var(--k-dots), linear-gradient(180deg, var(--k-paper), var(--k-paper2)); }
/* a column's first title sits on a small beige ribbon so empty columns still have a head */
.ui4 .win .col.frame > h3:first-child, .ui4 .win .col.frame > .ctitle:first-child { background: linear-gradient(180deg, var(--k-beige), var(--k-beige2)); border: 2px solid var(--k-line); border-radius: 999px; padding: 1px 12px; justify-self: start; width: max-content; max-width: 100%; box-shadow: inset 0 2px 0 rgba(255,255,255,.6); }

/* text helpers */
.ui4 h3, .ui4 .ctitle { font-family: var(--f-ui); color: var(--k-ink); font-weight: 600; }
.ui4 .hint { color: var(--k-ink2); }
.ui4 .bigpts, .ui4 .biglv { font-family: var(--f-px); color: var(--k-purple3); text-shadow: 0 2px 0 #fff; }
.ui4 .linkbtn { color: var(--k-purple3); }

/* ---------- buttons: round, chunky, white rim, darker bottom lip; press = sink ---------- */
.ui4 .btn, .ui4 button.btn, .ui4 .tab, .ui4 .iconbtn, .ui4 .pg, .ui4 .cd-btn {
  --bc: var(--k-beige); --bh: #fff6dc; --bs: var(--k-beige2); --bt: var(--k-ink);
  border: 2px solid var(--k-line); outline: none; border-radius: var(--k-r2);
  background: linear-gradient(180deg, var(--bh), var(--bc) 45%, var(--bc) calc(100% - 4px), var(--bs) 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(--bt); text-shadow: none; font-family: var(--f-ui); font-weight: 500; transition: transform .05s, filter .1s; }
.ui4 .btn:hover, .ui4 .tab:hover, .ui4 .iconbtn:hover, .ui4 .pg:hover { filter: brightness(1.04); }
.ui4 .btn:active:not(:disabled), .ui4 .tab:active, .ui4 .iconbtn:active, .ui4 .pg:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.ui4 .btn:disabled { filter: grayscale(.6) opacity(.6); }
.ui4 .btn.primary, .ui4 .btn[aria-pressed=true], .ui4 .pg.on { --bc: var(--k-yellow); --bh: var(--k-yellow2); --bs: var(--k-yellow3); --bt: #5a3a10; }
.ui4 .btn.go { --bc: var(--k-green); --bh: var(--k-green2); --bs: var(--k-green3); --bt: #fff; text-shadow: 0 1px 0 rgba(40,90,40,.6); }
.ui4 .btn.blue { --bc: var(--k-blue); --bh: var(--k-blue2); --bs: var(--k-blue3); --bt: #fff; text-shadow: 0 1px 0 rgba(40,60,140,.6); }
.ui4 .btn.danger, .ui4 .iconbtn.close { --bc: var(--k-coral); --bh: var(--k-coral2); --bs: var(--k-coral3); --bt: #fff; text-shadow: 0 1px 0 rgba(140,50,30,.6); }
.ui4 .floors .btn.boss { --bc: var(--k-pink); --bh: #ffd3e0; --bs: #d9708f; --bt: #fff; text-shadow: 0 1px 0 rgba(140,40,70,.6); }
.ui4 .btn.big { font-size: calc(var(--u) * 1.2); }
/* tabs: beige when off, purple when chosen (purple = "you are here" everywhere) */
.ui4 .tab { --bc: #ecd8b0; --bh: #f8ecd2; --bs: #d9bd8a; --bt: var(--k-ink2); }
.ui4 .tab[aria-pressed=true] { --bc: var(--k-purple); --bh: var(--k-purple2); --bs: var(--k-purple3); --bt: #fff; text-shadow: 0 1px 0 rgba(60,40,140,.6); }
.ui4 .iconbtn { font-weight: 600; }

/* ---------- cards / list rows: white-ish paper tile with a thin outline ---------- */
.ui4 .card, .ui4 .li, .ui4 .dopt, .ui4 .dress .dopt, .ui4 .boxc, .ui4 .rline, .ui4 .smmats .mat, .ui4 .smcard, .ui4 .mini {
  background: linear-gradient(180deg, #fffdf6, #fbf2de); color: var(--k-ink);
  border: 2px solid rgba(122,90,68,.55); border-radius: var(--k-r2); box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(122,90,68,.15); }
.ui4 .li[aria-current=true], .ui4 .dopt.on, .ui4 .dress .dopt.on, .ui4 .boxc.on, .ui4 .rline.on { border-color: var(--k-purple3); background: linear-gradient(180deg, #f4f0ff, #e6deff); outline: none; box-shadow: inset 0 0 0 2px #fff, 0 2px 0 rgba(106,82,200,.25); }
.ui4 .qpick, .ui4 .sktools { background: rgba(255,211,90,.18); border: 2px dashed rgba(199,140,40,.45); border-radius: var(--k-r2); color: var(--k-ink); }
.ui4 .li .ic { background: var(--k-beige); color: var(--k-ink); border-radius: 6px; }
.ui4 .li .pb, .ui4 .train { background: rgba(122,90,68,.18); border-radius: 3px; } .ui4 .li .pb i, .ui4 .train i { background: linear-gradient(90deg, var(--k-blue), var(--k-purple2)); border-radius: 3px; }

/* ---------- item / skill wells: recessed beige dish, rarity colour as the ring ---------- */
.ui4 .slot, .ui4 .sk, .ui4 .skc {
  --q: rgba(122,90,68,.35); border: 2px solid var(--k-line); border-radius: 10px;
  background: radial-gradient(circle at 50% 38%, #fffaf0, #f0dfbd 80%);
  box-shadow: inset 0 0 0 2px var(--q), inset 0 3px 0 rgba(122,90,68,.12); }
.ui4 .slot.q0 { --q: #c9bba8; } .ui4 .slot.q1 { --q: #6cc767; } .ui4 .slot.q2 { --q: #5f9cf0; } .ui4 .slot.q3 { --q: #a47ef0; } .ui4 .slot.q4 { --q: #f5a03c; } .ui4 .slot.q5 { --q: #f26b8a; }
.ui4 .slot.q1, .ui4 .slot.q2, .ui4 .slot.q3, .ui4 .slot.q4, .ui4 .slot.q5 { box-shadow: inset 0 0 0 3px var(--q), inset 0 0 0 5px rgba(255,255,255,.6); }
.ui4 .slot.empty { --q: transparent; background: radial-gradient(circle at 50% 38%, #fbf2de, #ecdab6 85%); opacity: 1; border-color: rgba(122,90,68,.45); }
.ui4 .slot.sel, .ui4 .slot.picked, .ui4 .skc.on, .ui4 .sk.on { box-shadow: inset 0 0 0 3px var(--q), 0 0 0 3px var(--k-purple); }
.ui4 .slot .e, .ui4 .skc .lv, .ui4 .sk .lvl { font-family: var(--f-px); font-weight: 700; color: #fff; text-shadow: 1px 1px 0 var(--k-line), -1px 0 0 var(--k-line), 0 -1px 0 var(--k-line); }
.ui4 .sk .cd { background: rgba(92,68,51,.5); }

/* ---------- inputs ---------- */
.ui4 select, .ui4 input[type=text], .ui4 input[type=number], .ui4 input[type=email] { background: #fffdf6; color: var(--k-ink); border: 2px solid rgba(122,90,68,.6); border-radius: var(--k-r2); box-shadow: inset 0 2px 0 rgba(122,90,68,.12); }
.ui4 option { background: #fffdf6; color: var(--k-ink); }

/* ---------- pills / bars ---------- */
.ui4 .pill { background: var(--k-beige); color: var(--k-ink); border: 1px solid rgba(122,90,68,.4); font-family: var(--f-ui); }
.ui4 .pill.tier { background: #ffe0d6; color: #b8402a; border-color: #f0a08a; } .ui4 .pill.enh { background: #fff0c0; color: #8a5a10; border-color: #e7c060; } .ui4 .pill.warn { background: #ffe6c0; color: #a05a10; }
.ui4 .bar { border: 2px solid var(--k-line); border-radius: 999px; background: #6a5040; box-shadow: inset 0 2px 0 rgba(0,0,0,.25); }
.ui4 .bar i { border-radius: 999px; }
.ui4 .bar i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 28%; border-radius: 999px; background: rgba(255,255,255,.35); }
.ui4 .bar.hp i { background: linear-gradient(#ff8f78, #e8553e); } .ui4 .bar.mp i { background: linear-gradient(#8fb2ff, #4f7fe6); }
.ui4 .bar.xp i { background: linear-gradient(#c2ec7a, #7cc23c); } .ui4 .bar.tg i { background: linear-gradient(#ff8f78, #e8553e); } .ui4 .bar.tg.boss i { background: linear-gradient(#ff8fb4, #e0487a); }
.ui4 .bar.perkbar i { background: linear-gradient(#ffe07a, #e7a92a); }
.ui4 .bar span { font-family: var(--f-px); font-weight: 600; color: #fff; text-shadow: 1px 1px 0 rgba(70,45,30,.9), -1px 0 0 rgba(70,45,30,.6); }
.ui4 .gauge { background: rgba(92,68,51,.35); border-radius: 3px; } .ui4 .gauge i { background: var(--k-yellow); }

/* ---------- HUD ---------- */
.ui4 .plate, .ui4 .target, .ui4 .hero { color: var(--k-ink); }
.ui4 .sysbtn { background: linear-gradient(180deg, #fffdf4, #f6e8c8); border: 2px solid var(--k-line); outline: none; border-radius: 12px; color: var(--k-ink);
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(122,90,68,.35); font-family: var(--f-ui); }
.ui4 .sysbtn span { font-size: calc(var(--u) * .68); color: var(--k-ink); }
.ui4 .sysbtn:hover, .ui4 .pad:hover { filter: brightness(1.04); }
.ui4 .sysbtn .dot, .ui4 .pad .dot, .ui4 .prof .dot, .ui4 .chatdock .dot { box-shadow: 0 0 0 2px #fff; }
.ui4 .pad { background: linear-gradient(180deg, #fffdf4, #f3e3c0); border: 2px solid var(--k-line); outline: none; border-radius: 14px; color: var(--k-ink); box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(122,90,68,.35); }
.ui4 .pad.on, .ui4 #bMode.on { background: linear-gradient(180deg, #d9f5c8, #a8e09a); }
.ui4 .pad.boss { background: linear-gradient(180deg, #fff0f4, #fbd3de); }
.ui4 .pad.boss.ready { background: linear-gradient(180deg, #ffb8cc, #f37a9c); color: #fff; }
.ui4 .pad.boss.in { background: linear-gradient(180deg, #f5d6d6, #e6aeae); }
.ui4 .pad small { color: var(--k-ink2); } .ui4 .pad.boss.ready small { color: #fff; }
.ui4 .hero .pt, .ui4 .prof img, .ui4 .pop .pc-head img, .ui4 .pf-big { background: radial-gradient(circle at 50% 40%, #fffaf0, #ead6ae); border-color: var(--k-line); box-shadow: inset 0 0 0 2px #fff; }
.ui4 .hero .pt { border: 2px solid var(--k-line); border-radius: 10px; }
.ui4 .hero .role { color: var(--k-purple3); }
.ui4 .hero .bf { background: #fffdf6; border: 2px solid rgba(122,90,68,.5); border-radius: 6px; }
.ui4 .hero .st b { background: #fff3d6; color: var(--k-ink); border: 1px solid rgba(122,90,68,.5); border-radius: 999px; padding: 0 6px; }
.ui4 .hero .st b.bad { background: #ffd8cf; color: #b8402a; } .ui4 .hero .st b.dead { background: #e0583f; color: #fff; }
.ui4 .syncbtn { background: radial-gradient(circle at 50% 35%, #fffdf4, #ead6ae); border: 2px solid var(--k-line); outline: none; color: var(--k-ink); box-shadow: inset 0 0 0 3px #fff, 0 3px 0 rgba(122,90,68,.35); }
.ui4 .syncbtn[aria-pressed=true] { background: radial-gradient(circle at 50% 35%, var(--k-purple2), var(--k-purple)); color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.8), 0 0 12px rgba(141,116,232,.6); }
/* skill bar on the battlefield: light glass so the fight stays visible */
.ui4 .skillpanel.frame { background: rgba(255,249,234,.55); border: 2px solid rgba(122,90,68,.55); outline: none; box-shadow: none; backdrop-filter: blur(2px); }
.ui4 .skillpanel .sk { --q: transparent; background: rgba(255,250,240,.6); border-color: rgba(122,90,68,.5); box-shadow: inset 0 2px 0 rgba(255,255,255,.7); }
.ui4 .sp-lab { color: var(--k-ink); }
/* toasts and chat on the field: translucent cocoa with cream text, like a floating note */
.ui4 .toast div { background: rgba(92,68,51,.82); color: #fff3d6; border-left: 0; border-radius: 10px; padding: 3px 12px; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.ui4 .chatdock { background: rgba(92,68,51,.62); border: 2px solid rgba(255,255,255,.35); border-radius: 12px; color: #fff3d6; backdrop-filter: blur(2px); }
.ui4 .chatdock.big { background: rgba(92,68,51,.9); border-color: rgba(255,255,255,.45); }
.ui4 .chatdock, .ui4 .chatdock .cd-log, .ui4 .chatdock .l { --parch: #fff3d6; --muted: #e8d5b8; --faint: #c9b49a; --brass3: #ffd35a; }
.ui4 .cd-tab { color: #f0dcc0; border-radius: 999px; padding: 1px 10px; font-family: var(--f-ui); font-weight: 500; }
.ui4 .cd-tab[aria-pressed=true] { background: var(--k-yellow); color: #5a3a10; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.ui4 .chatdock .cd-btn { --bc: rgba(255,255,255,.14); --bh: rgba(255,255,255,.24); --bs: rgba(255,255,255,.1); --bt: #fff3d6; border-color: rgba(255,255,255,.4); box-shadow: none; }
.ui4 .chatdock input { background: rgba(255,250,240,.92); }
/* 5 Nov 2026 (director: typed chat text was white on the cream box): dark text + visible placeholder in every chat box */
.ui4 .chatdock input, .ui4 .chatbar input, .ui4 .chatin input { color: var(--k-ink); caret-color: var(--k-ink); }
.ui4 .chatdock input::placeholder, .ui4 .chatbar input::placeholder, .ui4 .chatin input::placeholder { color: rgba(90,58,40,.55); }
.ui4 .bub img, .ui4 .li.th img, .ui4 .li.fr img, .ui4 .mini-av, .ui4 .cb-th img { background: #f3e3c0; border-color: rgba(122,90,68,.5); }
.ui4 .bub .bb { background: #fffdf6; color: var(--k-ink); border: 2px solid rgba(122,90,68,.35); }
.ui4 .bub.me .bb { background: #fff2c4; border-color: rgba(199,140,40,.5); }
.ui4 .bub.wh .bb { background: #ffe4ef; border-color: rgba(220,110,150,.45); } .ui4 .bub.me.wh .bb { background: #ffd6e6; }
.ui4 .chatdock .bub .bb { --parch: var(--k-ink); --muted: var(--k-ink2); color: var(--k-ink); }
.ui4 .cb-th { background: #fffdf6; color: var(--k-ink); border: 2px solid rgba(122,90,68,.35); }
.ui4 .cb-th[aria-pressed=true] { border-color: var(--k-purple); background: #efe9ff; }
.ui4 .jump { background: var(--k-yellow); color: #5a3a10; border: 2px solid var(--k-line); }

/* ---------- other blocks with dark defaults ---------- */
.ui4 .modal { background: rgba(80,110,50,.45); backdrop-filter: blur(2px); }
.ui4 .pop { color: var(--k-ink); } .ui4 .pop .x { color: var(--k-ink2); }
.ui4 .mtable { background: #fffdf6; border: 2px solid rgba(122,90,68,.45); border-radius: var(--k-r2); }
.ui4 .mtable th { background: var(--k-beige); color: var(--k-ink); }
.ui4 .mtable tr:nth-child(even) td { background: rgba(241,223,186,.25); }
.ui4 .mtable tr.me td { color: var(--k-purple3); background: rgba(141,116,232,.10); }
.ui4 .mtable td.sep { background: rgba(122,90,68,.08); color: var(--k-ink2); }
.ui4 .doll .fig { background: radial-gradient(ellipse at 50% 72%, rgba(156,201,108,.45), transparent 62%); }
.ui4 .portrait { background: radial-gradient(ellipse at 50% 70%, rgba(156,201,108,.45), rgba(255,255,255,0) 70%); border-color: rgba(122,90,68,.35); }
.ui4 .dress .dview { background: radial-gradient(circle at 50% 62%, rgba(156,201,108,.4), transparent 70%); }
.ui4 .dress .dframes img { background: #f3e3c0; }
.ui4 .grp h4 { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); border-radius: 6px; }
.ui4 .grp.phy h4 { background: linear-gradient(180deg, #ff9a86, #e8604a); } .ui4 .grp.mag h4 { background: linear-gradient(180deg, #9ab4ff, #5f84ea); } .ui4 .grp.end h4 { background: linear-gradient(180deg, #a8e08a, #5fb04a); }
.ui4 .inv .sellbanner, .ui4 .skills2 .sellbanner { background: #ffe4dc; border: 2px solid var(--k-coral); border-radius: var(--k-r2); color: #9a3a26; }
.ui4 .smres { border-radius: var(--k-r2); border-width: 2px; font-family: var(--f-ui); }
.ui4 .smres.ok { color: #7a5200; background: #fff2c4; border-color: var(--k-yellow3); }
.ui4 .smres.mid { color: #8a5a10; background: #fff7dc; border-color: #f0cf7a; }
.ui4 .smres.bad { color: #a8402a; background: #ffe4dc; border-color: var(--k-coral); }
.ui4 .smmats .rate .bar { background: rgba(122,90,68,.2); border: 0; }
.ui4 .book .page { background: #fffdf6; color: var(--k-ink); box-shadow: inset 0 0 0 2px rgba(122,90,68,.3); }
.ui4 .book .page .tip { background: rgba(255,211,90,.2); border-left-color: var(--k-yellow3); }
.ui4 .on-dot { background: #c9b8a2; } .ui4 .on-dot.on { background: #5cc05a; }

/* title + login */
.ui4 .title { background: var(--k-check), radial-gradient(ellipse at 50% 35%, rgba(205,232,160,.75), rgba(140,190,90,.92) 75%); }
.ui4 .title .tt-box h1 { font-family: var(--f-ui); font-weight: 600; color: #fff; text-shadow: 0 3px 0 var(--k-line), 3px 0 0 var(--k-line), -3px 0 0 var(--k-line), 0 -3px 0 var(--k-line), 0 6px 0 rgba(90,60,40,.25); }
.ui4 .tt-kicker, .ui4 .tt-ver, .ui4 .tt-who { color: #4f6a2c; }
.ui4 .tt-sso.guest { background: #fffdf6; color: var(--k-ink); }
.ui4 .rotate { background: var(--night); color: var(--k-ink); }

/* ---------- light-tone fixes for accents written for dark panels ---------- */
.ui4 .srow, .ui4 .log .m, .ui4 .syslog .sl, .ui4 .smstats > div { border-bottom: 1px dashed rgba(122,90,68,.22); }
.ui4 .modal .mhead { border-bottom: 2px solid rgba(122,90,68,.3); }
.ui4 .mtable td { border-top: 1px solid rgba(122,90,68,.1); }
.ui4 .cmpbox, .ui4 .chatbar, .ui4 .wsel, .ui4 .cb-threads { border-color: rgba(122,90,68,.22); }
.ui4 .slot small { color: var(--k-ink2); }
.ui4 .pl-wallet .g { color: #a86a10; } .ui4 .pl-wallet .st { color: #3f7fd8; } .ui4 .pl-wallet .ch { color: #8a5ad8; } .ui4 .pl-wallet .ac { color: #c0408a; }
.ui4 .tg-name .lv { color: var(--k-purple3); } .ui4 .tg-name .wv { color: #3f7fd8; }
.ui4 .sp-lab { color: var(--k-ink); }
.ui4 .sk.active, .ui4 .skillpanel .sk.active { box-shadow: inset 0 0 0 2px #5cc05a; border-color: #3f9a3c; }
.ui4 .sk.perm, .ui4 .skillpanel .sk.perm { box-shadow: inset 0 0 0 2px #ffcf4a; border-color: #c58a2a; }
.ui4 .log .m .who { color: #3f7fd8; }
.ui4 .kv b.good, .ui4 .enhstep .up, .ui4 .smstats .up, .ui4 .rcmp .card.new p { color: #3f9a3c; }
.ui4 .skc .in { color: #3f9a3c; text-shadow: 0 1px 0 #fff; }
.ui4 .syslog .sl.loot { color: #a86a10; } .ui4 .syslog .sl.fight { color: #c0442e; } .ui4 .syslog .sl.progress { color: #3f7fd8; }
.ui4 .chatdock .syslog .sl.loot { color: #ffd35a; } .ui4 .chatdock .syslog .sl.fight { color: #ffb0a8; } .ui4 .chatdock .syslog .sl.progress { color: #bfe3ff; }
.ui4 .cd-log .l b { color: #bfe3ff; } .ui4 .cd-log .l.mine b { color: #ffd35a; }
/* the dressing figure stands on a small lawn instead of a tall glow */
.ui4 .doll .fig { background: radial-gradient(ellipse 40% 9% at 50% 66%, rgba(122,174,78,.55), rgba(156,201,108,.25) 60%, transparent 100%); }
.ui4 .portrait { background: radial-gradient(ellipse 42% 10% at 50% 86%, rgba(122,174,78,.5), transparent 100%), linear-gradient(180deg, #fffdf6, #f6ecd6); border: 2px solid rgba(122,90,68,.35); }
.ui4 .skc.dim img { filter: grayscale(1) opacity(.45); }
.ui4 .skc .tr { color: #fff; text-shadow: 0 1px 0 var(--k-line); } .ui4 .skc .lv { color: #fff; text-shadow: 1px 1px 0 var(--k-line), -1px 0 0 var(--k-line); }
.ui4 .title { background: repeating-conic-gradient(rgba(255,255,255,.08) 0 25%, transparent 0 50%) 0 0 / 44px 44px, radial-gradient(ellipse at 50% 35%, rgba(214,236,176,.8), rgba(150,198,98,.94) 75%); }
.ui4 .tt-kicker { letter-spacing: .2em; }
.ui4 .chatdock .hint, .ui4 .chatdock .cnt { color: #ecdcc2; }
.ui4 .chatdock .card .hint, .ui4 .chatdock .signcard .hint { color: var(--k-ink2); }
/* no blur behind the field widgets: cheaper on phones and it can wash the colour out over the game canvas */
.ui4 .chatdock, .ui4 .chatdock.big, .ui4 .skillpanel.frame { backdrop-filter: none; }

/* ---------- pixel font (director 22–23 Oct 2026: "เปลี่ยนเป็นฟอนต์พิกเซล" → chose TA 8 bit) ----------
   "TA 8 bit" by TA Font (ทวีชัย อัศวรังสิตแสง), free incl. commercial use, only rule: don't sell the font itself
   (https://www.f0nt.com/release/ta-8-bit/) · credited in Menu. Thai marks are placed by the font's own liga rules.
   Its letters are small for the em (x-height .37), so font-size-adjust scales it to the size Mitr had; symbols it lacks
   (★ ✓ ◀ ▶ ✕ →) fall back to Mitr. */
@font-face { font-family: "TA8bit"; src: url("fonts/ta8bit.ttf") format("truetype"); font-display: swap;
  unicode-range: U+0020-002A, U+002C-007E, U+00A0-00D6, U+00D8-00FF, U+0E00-0E7F, U+2000-206F; }   /* its + and × are too small to read → Mitr */
:root.ui4 { --f-ui: "TA8bit", "Mitr", sans-serif; --f-body: "TA8bit", "Mitr", sans-serif; --f-px: "TA8bit", "Mitr", sans-serif; }
.ui4 body, .ui4 button, .ui4 input, .ui4 select, .ui4 textarea { font-family: var(--f-body); font-size-adjust: .52; -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; }
.ui4 *, .ui4 *::before, .ui4 *::after { font-weight: 400 !important; letter-spacing: 0 !important; font-size-adjust: .52; }
.ui4 .skc.dim img { filter: grayscale(1) opacity(.45); }
.ui4 .skc .tr { color: #fff; text-shadow: 0 1px 0 var(--k-line); } .ui4 .skc .lv { color: #fff; text-shadow: 1px 1px 0 var(--k-line), -1px 0 0 var(--k-line); }
.ui4 .title { background: repeating-conic-gradient(rgba(255,255,255,.08) 0 25%, transparent 0 50%) 0 0 / 44px 44px, radial-gradient(ellipse at 50% 35%, rgba(214,236,176,.8), rgba(150,198,98,.94) 75%); }
.ui4 .tt-kicker { letter-spacing: .2em; }
.ui4 .chatdock .hint, .ui4 .chatdock .cnt { color: #ecdcc2; }
.ui4 .chatdock .card .hint, .ui4 .chatdock .signcard .hint { color: var(--k-ink2); }
/* no blur behind the field widgets: cheaper on phones and it can wash the colour out over the game canvas */
.ui4 .chatdock, .ui4 .chatdock.big, .ui4 .skillpanel.frame { backdrop-filter: none; }

/* the wider pixel letters: keep the small labels on one line */
.ui4 .sysbtn span { font-size-adjust: .44; white-space: nowrap; overflow: visible; text-overflow: clip; }
.ui4 .pad small, .ui4 .slot small, .ui4 .skc .tr, .ui4 .sk .lvl, .ui4 .skc .lv { font-size-adjust: .46; }

/* content stays inside the stitched line (director 23 Oct 2026: profile edit box ran over the frame edge) */
.ui4 .win .col.frame { padding: calc(var(--u) * .35 + 9px); }
.ui4 .avgrid .slot { width: 100%; }
.ui4 .fld .row input { min-width: 0; flex: 1; }
.ui4 .cashcard .btn:disabled { filter: none; opacity: .85; }