/* The guild screen (2026-10-18, js/guildui.js): the user's LORDNINE guild pictures (ref/feedback/lordnine_guild/67-78)
   laid out element by element in the ranking screen's frame (css/ranking.css): obsidian + gold, a top bar, gold-underlined
   tabs, a left guild column, sub-tabs, dark bordered rows, LORDNINE's windows (a title with an ornament, ✕, ยกเลิก red /
   ใช้งาน steel). Laid out at 1440 x 860 and scaled to the window (.gu-stage); a phone gets one column (.gu-narrow).
   No soft halos round text. */
#guildui { position: fixed; inset: 0; z-index: 900; pointer-events: auto; overflow: hidden; user-select: none; font-family: 'Mali', sans-serif; color: #f2ead6;
  background: radial-gradient(ellipse 75% 70% at 55% 50%, #1f1d24 0%, #141318 62%, #0c0b0f 100%); animation: guIn 0.2s ease-out both; }
@keyframes guIn { from { opacity: 0; } to { opacity: 1; } }
#guildui[hidden], #guildui [hidden] { display: none !important; }
#guildui button { font-family: 'Mali', sans-serif; color: inherit; }
#guildui input, #guildui textarea { font-family: 'Mali', sans-serif; user-select: text; }
#guildui .gu-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; }
#guildui .gu-dim { color: #8a826f; }
#guildui .gu-ok { color: #7fdc8a; font-weight: 800; }
#guildui .red { color: #f0806e; }

/* ---- top bar ---- */
#guildui .gu-top { position: relative; flex: none; height: 44px; background: linear-gradient(#0b0a0e, #17151c); border-bottom: 1px solid rgba(217, 164, 67, 0.35); }
#guildui .gu-vit { position: absolute; left: 16px; top: 5px; width: 236px; display: flex; flex-direction: column; gap: 3px; }
#guildui .gu-hbar { position: relative; height: 15px; background: #2a2630; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
#guildui .gu-hbar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.2s; }
#guildui .gu-hbar.hp i { background: linear-gradient(#e2535a, #a8222e); }
#guildui .gu-hbar.mp { width: 92%; }
#guildui .gu-hbar.mp i { background: linear-gradient(#45b9e8, #1f6fae); }
#guildui .gu-hbar span { position: absolute; left: 8px; top: 0; font: 700 11.5px/15px Fredoka, Mali, sans-serif; color: #fff; text-shadow: 1px 0 0 #1a0c0c, -1px 0 0 #1a0c0c, 0 1px 0 #1a0c0c, 0 -1px 0 #1a0c0c; }
#guildui .gu-cur { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 8px; }
#guildui .gu-cur > span { display: flex; align-items: center; gap: 6px; height: 24px; min-width: 104px; padding: 0 10px 0 6px; border-radius: 4px; background: #0a090c; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.4); }
#guildui .gu-cur > span[data-info] { cursor: pointer; }
#guildui .gu-cur img { width: 18px; height: 18px; object-fit: contain; }
#guildui .gu-cur em { margin-left: auto; font: 700 13px Fredoka, Mali, sans-serif; font-style: normal; color: #f6ead0; font-variant-numeric: tabular-nums; }
#guildui .gu-cur .gu-coin { box-shadow: inset 0 0 0 1px rgba(127, 220, 138, 0.55); }
#guildui .gu-title { position: absolute; right: 12px; top: 4px; display: flex; align-items: center; gap: 10px; }
#guildui .gu-title b { font: 700 23px/36px 'Mali', sans-serif; color: #d9c9a2; letter-spacing: 1px; }
#guildui .gu-help { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #b9ab8c; background: none; color: #d9c9a2; font: 800 15px/22px Fredoka, sans-serif; cursor: pointer; }
#guildui .gu-help:hover, #guildui .gu-help:focus-visible { border-color: #f2c66a; color: #f2c66a; }
#guildui .gu-exit { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: none; display: grid; place-items: center; }
#guildui .gu-exit i { width: 30px; height: 30px; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / contain no-repeat; transition: transform 0.12s, filter 0.12s; }
#guildui .gu-exit:hover i, #guildui .gu-exit:focus-visible i { transform: scale(1.1); filter: brightness(1.2); }

/* ---- tabs (six in a guild, LORDNINE's spacing) + tools ---- */
#guildui .gu-bar1 { flex: none; height: 42px; display: flex; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(#16151a, #131217); }
#guildui .gu-tabs { display: flex; }
#guildui .gu-tabs button { position: relative; min-width: 124px; padding: 0 14px; border: 0; background: none; color: #9b927f; font: 600 15.5px Mali, sans-serif; cursor: pointer; border-bottom: 2px solid transparent; }
#guildui .gu-tabs.six button { width: 152px; }
#guildui .gu-tabs button.on { color: #f2c66a; border-bottom-color: #d9a443; background: linear-gradient(rgba(217, 164, 67, 0), rgba(217, 164, 67, 0.13)); }
#guildui .gu-tabs button:not(.on):hover { color: #e6d3a3; }
#guildui .gu-badge { position: absolute; right: 6px; top: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d8323c; color: #fff; font: 700 11px/18px Fredoka, sans-serif; font-style: normal; box-shadow: 0 0 0 2px #16151a; }
#guildui .gu-badge.n { background: #8a6a32; }
#guildui .gu-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-right: 14px; }
#guildui .gu-field { display: flex; align-items: center; width: 240px; height: 28px; background: #0d0c10; border: 1px solid rgba(217, 164, 67, 0.32); border-radius: 3px; }
#guildui .gu-field.inv { width: 250px; height: 34px; }
#guildui .gu-field.wide { width: 100%; height: 34px; }
#guildui .gu-mag { position: relative; flex: none; width: 12px; height: 12px; margin: 0 8px 2px 9px; border: 2px solid #b9ab8c; border-radius: 50%; }
#guildui .gu-mag::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; background: #b9ab8c; transform: rotate(45deg); }
#guildui .gu-field input { flex: 1; min-width: 0; height: 100%; padding: 0 8px; border: 0; outline: 0; background: none; color: #f2ead6; font: 500 13px Mali, sans-serif; }
#guildui .gu-field .gu-mag + input { padding-left: 0; }
#guildui .gu-field input::placeholder { color: #8a826f; }
#guildui .gu-go { flex: none; height: 22px; margin-right: 3px; padding: 0 12px; border: 1px solid #7a5a2a; border-radius: 3px; cursor: pointer; background: linear-gradient(#3a2f20, #251d14); color: #f2dfae; font: 600 12px Mali, sans-serif; }
#guildui .gu-field.wide .gu-go, #guildui .gu-field.inv .gu-go { height: 28px; }
#guildui .gu-go:hover, #guildui .gu-go:focus-visible { border-color: #d9a443; color: #fff1cc; }
#guildui .gu-refresh { width: 46px; height: 28px; padding: 0; border: 1px solid rgba(217, 164, 67, 0.4); border-radius: 3px; cursor: pointer; background: linear-gradient(#2a2730, #1a1820); display: grid; place-items: center; }
#guildui .gu-refresh i::before { content: '⟳'; display: block; font: 700 20px/1 sans-serif; color: #e6d3a3; }
#guildui .gu-refresh.spin i { animation: guSpin 0.6s ease-out; }
@keyframes guSpin { to { transform: rotate(360deg); } }

/* ---- second row (no-guild pages): notes, chips ---- */
#guildui .gu-bar2 { flex: none; min-height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
#guildui .gu-note { display: inline-flex; align-items: center; gap: 4px; font: 500 13px Mali, sans-serif; color: #c9bfa8; white-space: nowrap; }
#guildui .gu-note b { color: #f2c66a; font: 700 14px Fredoka, Mali, sans-serif; }
#guildui .gu-note.dim { color: #8f877a; font-size: 12px; white-space: normal; }
#guildui .gu-subs { display: flex; gap: 4px; }
#guildui .gu-subs button { height: 26px; padding: 0 12px; border: 1px solid rgba(217, 164, 67, 0.3); border-radius: 13px; background: #141318; color: #a89e8a; font: 600 12px Mali, sans-serif; cursor: pointer; }
#guildui .gu-subs button.on { border-color: #d9a443; color: #1c1408; background: #d9a443; }
#guildui .gu-subs button:not(.on):hover { color: #e6d3a3; border-color: rgba(217, 164, 67, 0.6); }
#guildui .gu-tick { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border: 0; background: none; color: #c9bfa8; font: 500 13.5px Mali, sans-serif; cursor: pointer; }
#guildui .gu-tick i { width: 22px; height: 22px; border: 1px solid #8a7a5a; border-radius: 3px; background: #0d0c10; display: grid; place-items: center; }
#guildui .gu-tick.on { color: #f2ead6; }
#guildui .gu-tick.on i { border-color: #d9a443; }
#guildui .gu-tick.on i::after { content: '✓'; font: 800 16px/1 sans-serif; color: #f2c66a; }
#guildui .gu-tick:disabled { opacity: 0.55; cursor: default; }
#guildui .gu-bar2 .gu-btn.sm { margin-left: auto; }
#guildui .gu-coinpill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 6px; border-radius: 14px; background: #0d0c10; box-shadow: inset 0 0 0 1px rgba(127, 220, 138, 0.55); font: 600 13px Mali, sans-serif; color: #d8f0d8; white-space: nowrap; }
#guildui .gu-coinpill b { font: 700 15px Fredoka, sans-serif; color: #fff; }
#guildui .gu-ci { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }

/* ---- buttons (dark with a gold trim; steel = LORDNINE's blue-steel buttons; red = ยกเลิก / สลาย) ---- */
#guildui .gu-btn { position: relative; height: 34px; padding: 0 16px; border: 1px solid #6a5634; border-radius: 3px; cursor: pointer; background: linear-gradient(#2c2833, #1c1a21); color: #e6d3a3; font: 600 14px Mali, sans-serif; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
#guildui .gu-btn:hover:not(:disabled), #guildui .gu-btn:focus-visible { border-color: #d9a443; color: #fff1cc; }
#guildui .gu-btn.gold { border-color: #e0b452; color: #2a1c08; background: linear-gradient(#f6d27a, #c99536); box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6); }
#guildui .gu-btn.gold:hover:not(:disabled) { background: linear-gradient(#ffe39a, #d9a443); color: #1c1408; }
#guildui .gu-btn.steel { border-color: #8a7444; color: #eef3f2; background: linear-gradient(#2f4652, #1b2b33); box-shadow: inset 0 1px 0 rgba(200, 230, 240, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
#guildui .gu-btn.steel:hover:not(:disabled) { border-color: #e0b452; background: linear-gradient(#3a5664, #22363f); }
#guildui .gu-btn.red { border-color: #9a4a3a; color: #ffe1d8; background: linear-gradient(#6a2a26, #45191a); }
#guildui .gu-btn.red:hover:not(:disabled) { border-color: #e86a5a; color: #fff; }
#guildui .gu-btn.done { border-color: #4f9a34; background: linear-gradient(#2c3a26, #1d2619); color: #a8e6a0; }
#guildui .gu-btn:disabled { opacity: 0.5; cursor: default; filter: grayscale(0.4); }
#guildui .gu-btn.done:disabled { opacity: 1; filter: none; }
#guildui .gu-btn.sm { height: 26px; padding: 0 12px; font-size: 12px; }
#guildui .gu-btn.wide { width: 100%; }
#guildui .gu-btn.wide2 { min-width: 260px; height: 46px; font-size: 16px; }
#guildui .gu-btn.big { width: 100%; height: 44px; font-size: 16px; }
#guildui .gu-dotr { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e2403c; box-shadow: 0 0 0 2px #1b2b33; }
#guildui .gu-mini { height: 26px; padding: 0 10px; margin-left: 6px; border: 1px solid rgba(217, 164, 67, 0.4); border-radius: 3px; background: #1a1820; color: #e6d3a3; font: 600 12px Mali, sans-serif; cursor: pointer; }
#guildui .gu-mini:hover { border-color: #d9a443; color: #fff1cc; }
#guildui .gu-mini.gold { border-color: #e0b452; color: #2a1c08; background: linear-gradient(#f6d27a, #c99536); }
#guildui .gu-link { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: #f6d27a; text-decoration: underline; text-underline-offset: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#guildui .gu-acts { display: flex; gap: 12px; margin-top: 14px; }
#guildui .gu-acts.r { justify-content: flex-end; }
#guildui .gu-acts.c { justify-content: center; flex-wrap: wrap; }
#guildui .gu-acts.c .gu-btn { min-width: 150px; height: 42px; font-size: 15px; }
#guildui .gu-tag { display: inline-block; padding: 3px 10px; border-radius: 3px; background: rgba(217, 164, 67, 0.16); color: #f2c66a; font: 600 12px Mali, sans-serif; }
#guildui .gu-tag.dim { background: rgba(255, 255, 255, 0.05); color: #8f877a; }
#guildui .gu-join { display: inline-block; padding: 2px 8px; border-radius: 10px; font: 600 11.5px Mali, sans-serif; white-space: nowrap; }
#guildui .gu-join.open { background: rgba(127, 220, 138, 0.15); color: #8fe39a; box-shadow: inset 0 0 0 1px rgba(127, 220, 138, 0.4); }
#guildui .gu-join.ask { background: rgba(130, 170, 230, 0.13); color: #a9c8f2; box-shadow: inset 0 0 0 1px rgba(130, 170, 230, 0.4); }
#guildui .gu-lvchip { margin-left: 6px; font: 700 11px Fredoka, sans-serif; font-style: normal; color: #1c1408; background: #d9a443; border-radius: 3px; padding: 1px 5px; vertical-align: 1px; }
#guildui .gu-role { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
#guildui .gu-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #5a5560; }
#guildui .gu-dot.on { background: #6fd17a; box-shadow: 0 0 0 2px rgba(111, 209, 122, 0.25); }
/* LORDNINE's ornament under a title: a thin gold line with a diamond in its middle */
#guildui .gu-orn { position: relative; display: block; flex: none; height: 9px; margin: 2px auto 6px; width: 86%; }
#guildui .gu-orn::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, rgba(217, 164, 67, 0), rgba(217, 164, 67, 0.65) 50%, rgba(217, 164, 67, 0)); }
#guildui .gu-orn::after { content: ''; position: absolute; left: 50%; top: 1px; width: 6px; height: 6px; margin-left: -3px; border: 1px solid #d9a443; background: #17151c; transform: rotate(45deg); }

/* ---- body + panels ---- */
#guildui .gu-body { position: relative; flex: 1; min-height: 0; padding: 10px 14px 12px; }
#guildui .gu-panel { position: relative; min-height: 0; padding: 12px 14px; border-radius: 3px; background: linear-gradient(#1b1a20, #17161b); border: 1px solid rgba(255, 255, 255, 0.07); }
#guildui .gu-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5a3a transparent; }
#guildui .gu-empty { padding: 50px 0; text-align: center; color: #8f877a; font: 500 14px/2 Mali, sans-serif; }
#guildui .gu-empty.sm { padding: 24px 0; font-size: 13px; }
#guildui .gu-empty.mid { padding: 0; height: 100%; display: grid; place-items: center; font-size: 16px; color: #a49b88; }
#guildui .gu-empty .gu-btn { margin-top: 10px; }
#guildui .gu-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid #d9a443; border-right-color: transparent; border-radius: 50%; animation: guSpin 0.7s linear infinite; }
#guildui .gu-busy { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); padding: 8px 16px; border-radius: 4px; background: rgba(10, 9, 12, 0.9); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.4); font: 500 13px Mali, sans-serif; color: #e6d3a3; }
#guildui .gu-emb { display: grid; place-items: center; }
#guildui .gu-emb img { width: 100%; height: 100%; object-fit: contain; }
#guildui .gu-emb.mid { flex: none; width: 84px; height: 84px; }
#guildui img.gu-emb.sm { flex: none; width: 40px; height: 40px; object-fit: contain; }

/* ---- ข้อมูลกิลด์: the left column (picture 67) ---- */
#guildui .gu-body.gu-p-info, #guildui .gu-body.gu-p-up, #guildui .gu-body.gu-p-ally, #guildui .gu-body.gu-p-bank, #guildui .gu-body.gu-p-auc, #guildui .gu-body.gu-p-boss { padding: 0; }
#guildui .gu-info2 { height: 100%; display: grid; grid-template-columns: 312px minmax(0, 1fr); }
#guildui .gu-left { min-height: 0; display: flex; flex-direction: column; padding: 10px 16px 12px; border-right: 1px solid rgba(217, 164, 67, 0.22); background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)); }
#guildui .gu-gname { margin: 2px 0 0; text-align: center; font: 700 19px Mali, sans-serif; color: #e6d3a3; word-break: break-all; }
#guildui .gu-lrow { display: flex; align-items: center; justify-content: space-between; height: 44px; }
#guildui .gu-edit { height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; background: #1d1b22; color: #d8cfbd; font: 600 12.5px Mali, sans-serif; cursor: pointer; }
#guildui .gu-edit:hover { border-color: #d9a443; color: #fff1cc; }
#guildui .gu-rankic { width: 40px; height: 40px; padding: 0; border: 1px solid rgba(217, 164, 67, 0.55); background: #17151c; cursor: pointer; transform: rotate(45deg) scale(0.86); display: grid; place-items: center; overflow: hidden; }
#guildui .gu-rankic img { width: 34px; height: 34px; transform: rotate(-45deg); }
#guildui .gu-rankic:hover { border-color: #f2c66a; }
#guildui .gu-bigemb { flex: 1; min-height: 120px; display: grid; place-items: center; position: relative; }
#guildui .gu-bigemb::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(rgba(70, 160, 110, 0.22), rgba(70, 160, 110, 0) 68%); }
#guildui .gu-bigemb img { position: relative; width: 176px; height: 176px; object-fit: contain; }
#guildui .gu-bigemb.mid img { width: 210px; height: 210px; }
#guildui .gu-lvline { text-align: center; font: 600 21px Mali, sans-serif; color: #5fd6b4; margin-bottom: 4px; }
#guildui .gu-lvline b { font: 700 23px Fredoka, sans-serif; margin-left: 6px; }
#guildui .gu-xp { position: relative; flex: none; height: 18px; border-radius: 2px; background: #0d0c10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; }
#guildui .gu-xp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#5fd6b4, #2f8f74); }
#guildui .gu-xp span { position: relative; display: block; text-align: center; font: 700 12px/18px Fredoka, Mali, sans-serif; color: #fff; text-shadow: 1px 0 0 #0c1410, -1px 0 0 #0c1410, 0 1px 0 #0c1410, 0 -1px 0 #0c1410; }
#guildui .gu-lbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#guildui .gu-lbtns.ic { grid-template-columns: 1fr 44px 44px 44px; align-items: center; margin-top: 10px; }
#guildui .gu-lbtns .gu-btn { height: 38px; padding: 0 6px; }
#guildui .gu-lbtns.foot { margin-top: auto; padding-top: 12px; }
#guildui .gu-lbtns.foot .gu-btn { height: 46px; font-size: 15.5px; }
#guildui .gu-round { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid #8a7444; background: radial-gradient(#2b2832, #141218); cursor: pointer; display: grid; place-items: center; }
#guildui .gu-round img { width: 32px; height: 32px; object-fit: contain; }
#guildui .gu-round:hover { border-color: #f2c66a; }
#guildui .gu-round.hot::after { content: ''; position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: #e2403c; box-shadow: 0 0 0 2px #141218; }
#guildui .gu-lfacts { margin: 14px 4px 0; display: flex; flex-direction: column; gap: 7px; }
#guildui .gu-lfacts div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
#guildui .gu-lfacts dt { font: 500 13px Mali, sans-serif; color: #8f877a; white-space: nowrap; }
#guildui .gu-lfacts dd { margin: 0; display: flex; align-items: center; min-width: 0; font: 600 14px Mali, sans-serif; color: #f2ead6; white-space: nowrap; overflow: hidden; }
#guildui .gu-lfacts .gu-role { width: 20px; height: 20px; }
#guildui .gu-lfacts .gu-link { color: #f2ead6; text-decoration: none; }
#guildui .gu-lfacts .gu-link:hover { color: #f6d27a; text-decoration: underline; }

/* ---- the right side: sub-tabs + panes ---- */
#guildui .gu-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 12px; }
#guildui .gu-subtabs { flex: none; display: flex; height: 46px; padding-left: 50px; }
#guildui .gu-subtabs button { position: relative; width: 200px; border: 0; background: none; color: #9b927f; font: 600 16px Mali, sans-serif; cursor: pointer; border-bottom: 2px solid transparent; }
#guildui .gu-subtabs button.on { color: #f2c66a; border-bottom-color: rgba(217, 164, 67, 0.75); }
#guildui .gu-subtabs button:not(.on):hover { color: #e6d3a3; }
/* แชทกิลด์: the notice bar, the kept chat, the input */
#guildui .gu-ann { flex: none; display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
#guildui .gu-megaph { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #8a7444; background: radial-gradient(#3a3440, #18161c); display: grid; place-items: center; }
#guildui .gu-megaph img { width: 32px; height: 32px; object-fit: contain; }
#guildui .gu-annbar { flex: 1; min-width: 0; height: 58px; display: flex; align-items: center; padding: 0 10px 0 14px; border: 1px solid rgba(160, 110, 190, 0.55); border-radius: 2px; background: linear-gradient(90deg, #3a2244, #2b1a33 70%, #24162a); }
#guildui .gu-annbar p { margin: 0; flex: 1; font: 600 15px/1.4 Mali, sans-serif; color: #f2e6f6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#guildui .gu-annbar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #f2e6f6; font: 600 15px Mali, sans-serif; }
#guildui .gu-annbar input::placeholder { color: #a892b0; }
#guildui .gu-enter { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 2px solid #b9ab8c; background: #1c1a21; color: #e6d3a3; font: 800 18px/1 sans-serif; cursor: pointer; }
#guildui .gu-enter:hover { border-color: #f2c66a; color: #fff1cc; }
#guildui .gu-enter.big { width: 92px; height: 40px; border-radius: 3px; border: 1px solid #8a7444; background: linear-gradient(#2c2833, #1c1a21); font-size: 20px; }
#guildui .gu-chatbox { flex: 1; min-height: 0; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.22); border-radius: 2px; }
#guildui .gu-chatlog { height: 100%; display: flex; flex-direction: column; padding: 8px 16px; }
#guildui .gu-chatlog ul { margin: auto 0 0; padding: 0; list-style: none; }
#guildui .gu-chatlog li { padding: 3px 0; font: 500 15px/1.45 Mali, sans-serif; color: #e8e0cc; word-break: break-word; user-select: text; }
#guildui .gu-chatlog time { margin-right: 4px; font: 500 14px Fredoka, Mali, sans-serif; color: #d8d2c4; }
#guildui .gu-chatlog li b { color: #f2c66a; font-weight: 600; }
#guildui .gu-chatlog li.s span { color: #6fd6a8; }
#guildui .gu-chatlog li.d .g { margin-left: 4px; color: #7fdc6a; }
#guildui .gu-chatlog li.d em { font-style: normal; font-weight: 600; }
#guildui .gu-chatempty { margin: auto 0 4px; font: 500 14px Mali, sans-serif; }
#guildui .gu-chatfoot { flex: none; display: flex; gap: 6px; margin-top: 10px; padding: 4px; background: #0b0a0e; border: 1px solid rgba(255, 255, 255, 0.07); }
#guildui .gu-chatin { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; outline: 0; background: none; color: #f2ead6; font: 500 15px Mali, sans-serif; }
#guildui .gu-chatin::placeholder { color: #7f786a; }

/* ---- tables ---- */
#guildui .gu-table { position: relative; height: 100%; display: flex; flex-direction: column; min-height: 0; }
#guildui .gu-head { flex: none; display: grid; grid-template-columns: var(--cols); height: 34px; align-items: center; text-align: center; background: rgba(255, 255, 255, 0.035); font: 600 13px Mali, sans-serif; color: #a89e8a; }
#guildui .gu-head span { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
#guildui .gu-rows { flex: 1; min-height: 0; padding-top: 8px; }
#guildui .gu-row { display: grid; grid-template-columns: var(--cols); align-items: center; min-height: 52px; margin-bottom: 5px; text-align: center; cursor: pointer;
  background: linear-gradient(#1b1a20, #17161b); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 2px; }
#guildui .gu-row:hover { border-color: rgba(217, 164, 67, 0.4); }
#guildui .gu-row.me { background: linear-gradient(#2a2620, #211e1a); border-color: rgba(217, 164, 67, 0.6); }
#guildui .gu-row.off .nm b { color: #b9ae96; }
#guildui .gu-row .c { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 6px; font: 500 14px Mali, sans-serif; color: #e3d9c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#guildui .gu-row .c.num { font: 600 15px Fredoka, sans-serif; font-variant-numeric: tabular-nums; color: #e8e0cc; }
#guildui .gu-row .c.nm { justify-content: flex-start; }
#guildui .gu-row .c.nm b { font: 600 15.5px Mali, sans-serif; color: #f2ead6; overflow: hidden; text-overflow: ellipsis; }
#guildui .gu-row .c.nm small { font-size: 11.5px; color: #a89e8a; }
#guildui .gu-row .c.st { font-size: 13px; color: #b9ae96; }
#guildui .gu-row .c.st small { color: #8f877a; font-size: 11.5px; }
#guildui .gu-row .c.gn { justify-content: flex-start; padding-left: 12px; gap: 10px; }
#guildui .gu-row .c.gn > span { display: flex; align-items: center; min-width: 0; }
#guildui .gu-row .c.gn b { font: 700 15px Mali, sans-serif; color: #f2ead6; overflow: hidden; text-overflow: ellipsis; }
#guildui .gu-row .c.it, #guildui .gu-row .c.note { justify-content: flex-start; font-size: 13px; color: #b9ae96; white-space: normal; text-align: left; }
#guildui .gu-row .c.bt { gap: 4px; }
#guildui .gu-row .c.cp { font: 600 16px Fredoka, sans-serif; color: #f2c66a; }
#guildui .gu-row .c.cp img { width: 22px; height: 22px; }
#guildui .gu-row .c.ctb { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; font-size: 13.5px; color: #a89e8a; }
#guildui .gu-row .c.ctb b { margin-left: 4px; font: 600 14.5px Fredoka, sans-serif; color: #d8cfbd; }
#guildui .gu-row .c.ctb b.w { color: #f2ead6; }
#guildui .gu-row .c.rl .gu-role { width: 32px; height: 32px; margin: 0; }
#guildui .gu-on { color: #f2ead6; font: 700 14.5px Mali, sans-serif; }
#guildui .gu-sorth { width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
#guildui .gu-sorth i { width: 7px; height: 7px; border-left: 2px solid #8f877a; border-top: 2px solid #8f877a; transform: translateY(2px) rotate(45deg); }
#guildui .gu-sorth.on i { border-color: #f2c66a; }
#guildui .gu-sorth.dn i { transform: translateY(-2px) rotate(225deg); }
#guildui .gu-table.mem2 { flex: 1; height: auto; --cols: 90px minmax(0, 1.1fr) 150px minmax(0, 1.5fr) minmax(0, 1.3fr) 160px; }
#guildui .gu-table.mem2 .gu-row { min-height: 70px; }
#guildui .gu-memnote { flex: none; margin: 8px 0 6px; font: 500 13px Mali, sans-serif; color: #8f877a; }
#guildui .gu-memfoot { flex: none; display: flex; align-items: center; gap: 14px; }
#guildui .gu-memfoot .gu-btn { height: 42px; font-size: 15px; min-width: 130px; }
#guildui .gu-elite { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 14px Mali, sans-serif; color: #d8cfbd; }
#guildui .gu-elite img { width: 32px; height: 32px; }
#guildui .gu-table.req2 { flex: 1; height: auto; --cols: minmax(0, 1fr) 230px minmax(0, 1.6fr) 200px; }
#guildui .gu-table.req2 .gu-row { cursor: default; min-height: 56px; }
#guildui .gu-table.req2 .c.nm { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-left: 16px; }
#guildui .gu-reqfoot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 8px; font: 500 14px Mali, sans-serif; color: #d8a25a; }
#guildui .gu-reqfoot .gu-btn { height: 42px; min-width: 130px; }
#guildui .gu-table.list { --cols: minmax(0, 1.5fr) minmax(0, 0.9fr) 90px 80px 90px 120px minmax(0, 1.6fr) 130px; }
#guildui .gu-table.list .gu-row { min-height: 58px; }
#guildui .gu-table.mine { --cols: minmax(0, 1.5fr) minmax(0, 1fr) 100px 120px 140px; }

/* ---- อัปเกรดกิลด์ (picture 69) ---- */
#guildui .gu-up { height: 100%; display: grid; grid-template-columns: 400px minmax(0, 1fr) 360px; gap: 12px; padding: 10px 12px 12px; }
#guildui .gu-upl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 80px; }
#guildui .gu-ring { position: relative; width: 236px; height: 236px; border-radius: 50%; background: conic-gradient(#3fc6a0 calc(var(--p) * 1%), #1f2b2a 0); display: grid; place-items: center; }
#guildui .gu-ring::before { content: ''; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; margin-left: -7px; border: 2px solid #d9a443; background: #2a2416; transform: rotate(45deg); }
#guildui .gu-ring > div { width: 212px; height: 212px; border-radius: 50%; background: radial-gradient(#25222b, #121116 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#guildui .gu-ring small { font: 600 16px Mali, sans-serif; color: #d8cfbd; }
#guildui .gu-ring b { font: 600 62px/1 Fredoka, sans-serif; color: #f2ead6; }
#guildui .gu-ring span { font: 600 12.5px Fredoka, sans-serif; color: #c9bfa8; }
#guildui .gu-fund { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
#guildui .gu-fund img { width: 36px; height: 36px; }
#guildui .gu-fund b { font: 600 28px Fredoka, sans-serif; color: #e3c97a; }
#guildui .gu-upl .gu-orn { width: 300px; }
#guildui .gu-fundnote { font: 500 12.5px Mali, sans-serif; color: #8f877a; margin-top: -6px; }
#guildui .gu-brows { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
#guildui .gu-brow { flex: none; display: grid; grid-template-columns: 90px 112px 112px 112px minmax(0, 1fr); align-items: center; height: 128px; padding: 0 12px; border: 1px solid rgba(110, 170, 170, 0.18); border-radius: 2px;
  background: linear-gradient(90deg, #1a2c31, #1d3540 60%, #1a2c31); }
#guildui .gu-brow.lock { background: linear-gradient(90deg, #1c1517, #241a1c 60%, #1c1517); border-color: rgba(200, 80, 70, 0.22); }
#guildui .gu-diam { justify-self: center; position: relative; width: 50px; height: 50px; border: 2px solid #3fc6a0; background: #11201f; transform: rotate(45deg); display: grid; place-items: center; }
#guildui .gu-diam > * { transform: rotate(-45deg); }
#guildui .gu-diamn { font: 600 24px/1 Fredoka, sans-serif; color: #eef3f2; }
#guildui .gu-brow.lock .gu-diam { border-color: #b8443c; }
#guildui .gu-brow.lock .gu-diamn { color: #f0806e; }
#guildui .gu-med { position: relative; justify-self: center; width: 98px; height: 98px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
#guildui .gu-med img { width: 98px; height: 98px; object-fit: contain; transition: transform 0.12s, filter 0.12s; }
#guildui .gu-med:hover img { transform: scale(1.05); }
#guildui .gu-med i { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; border: 2px solid #3a6a66; background: #10201f; font: 700 14px/22px Fredoka, sans-serif; font-style: normal; color: #eef3f2; }
#guildui .gu-med.on img { filter: drop-shadow(0 0 7px rgba(242, 198, 106, 0.85)); }
#guildui .gu-med.on i { border-color: #e0b452; background: #2a2210; color: #ffe39a; }
#guildui .gu-med.dim img { filter: grayscale(0.6) brightness(0.6); }
#guildui .gu-brow.lock .gu-med img { filter: grayscale(1) brightness(0.45); }
#guildui .gu-bstate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font: 600 16px Mali, sans-serif; color: #eef3f2; }
#guildui .gu-bstate b { font: 700 15px Mali, sans-serif; color: #ffe39a; }
#guildui .gu-bstate small { font: 600 13px Fredoka, Mali, sans-serif; color: #9fe8c4; }
#guildui .gu-bstate em { font-style: normal; font-size: 15px; line-height: 1.3; }
#guildui .gu-effp { min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid rgba(217, 164, 67, 0.28); border-radius: 2px; background: linear-gradient(#1b1a20, #141318); }
#guildui .gu-effp h3 { margin: 0; text-align: center; font: 700 17px Mali, sans-serif; color: #e6d3a3; }
#guildui .gu-effp ul { margin: 6px 0 0; padding: 0; list-style: none; }
#guildui .gu-effp li { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font: 500 14px Mali, sans-serif; color: #d8cfbd; }
#guildui .gu-effp li b { font: 700 15px Fredoka, Mali, sans-serif; color: #9fe8c4; }
#guildui .gu-noeff { flex: 1; display: grid; place-items: center; margin: 0; font: 600 16px Mali, sans-serif; color: #e09a8e; }
#guildui .gu-effnote { margin: auto 0 0; padding-top: 10px; font: 500 12px/1.5 Mali, sans-serif; color: #8f877a; }

/* ---- the later rounds' pages (สหพันธ์/ปรปักษ์ 68, คลังกิลด์ 71, ประมูลกิลด์ 72, บอสกิลด์) ---- */
#guildui .gu-soon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 22px; border: 1px solid rgba(217, 164, 67, 0.55); border-radius: 4px; background: rgba(14, 12, 18, 0.92); }
#guildui .gu-soon b { font: 700 16px Mali, sans-serif; color: #f2dfae; }
#guildui .gu-soon span { font: 600 13px Mali, sans-serif; color: #c9a85a; }
#guildui .gu-ally { position: relative; height: 100%; display: grid; grid-template-columns: 330px minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr) 70px; gap: 0 20px; padding: 14px 40px 10px; }
#guildui .gu-banner { display: flex; flex-direction: column; min-height: 0; }
#guildui .gu-banner h3 { margin: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; font: 700 17px Mali, sans-serif; color: #e6d3a3; border-bottom: 1px solid rgba(217, 164, 67, 0.4); }
#guildui .gu-banner h3 em { font: 600 12px Fredoka, sans-serif; font-style: normal; padding: 2px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); color: #d8cfbd; }
#guildui .gu-banner div { flex: 1; margin: 0 20px; clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }
#guildui .gu-banner.blue div { background: linear-gradient(#1d2a3e, #121a26); }
#guildui .gu-banner.red div { background: linear-gradient(#3a2220, #1e1414); }
#guildui .gu-allym { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
#guildui .gu-allym > b { font: 700 20px Mali, sans-serif; color: #f2ead6; margin-bottom: 14px; }
#guildui .gu-allym .gu-orn { width: 380px; }
#guildui .gu-allym .gu-bigemb { flex: none; height: 240px; }
#guildui .gu-scope { position: absolute; top: 14px; display: flex; align-items: center; gap: 18px; }
#guildui .gu-scope button { border: 0; background: none; font: 600 17px Mali, sans-serif; color: #8f877a; }
#guildui .gu-scope button.on { color: #f2c66a; }
#guildui .gu-scope i { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }
#guildui .gu-allyfoot { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; }
#guildui .gu-allyfoot span { flex: 1; }
#guildui .gu-allyfoot .gu-btn { height: 48px; min-width: 190px; font-size: 16px; }
#guildui .gu-bank { position: relative; height: 100%; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 12px 14px; }
#guildui .gu-lmenu { display: flex; flex-direction: column; }
#guildui .gu-lmenu button { height: 58px; padding: 0 22px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: none; text-align: left; font: 600 16px Mali, sans-serif; color: #d8cfbd; }
#guildui .gu-lmenu button.on { border: 1px solid #b98a3a; border-radius: 2px; color: #fff1cc; background: linear-gradient(90deg, rgba(150, 104, 40, 0.75), rgba(92, 66, 30, 0.6) 70%, rgba(60, 44, 22, 0.45)); }
#guildui .gu-bankgrid { display: flex; flex-direction: column; min-height: 0; width: 460px; }
#guildui .gu-slots { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 68px; gap: 4px; overflow: hidden; }
#guildui .gu-slots i { border: 1px solid rgba(255, 255, 255, 0.06); background: #141318; }
#guildui .gu-bankfoot { flex: none; display: flex; gap: 40px; padding-top: 10px; font: 600 16px Mali, sans-serif; color: #d8cfbd; }
#guildui .gu-auc h3 { margin: 4px 0 8px; font: 600 18px Mali, sans-serif; color: #e6d3a3; }
#guildui .gu-auc .gu-head { --cols: 1.4fr 1fr 1fr; }
#guildui .gu-bank > .gu-soon, #guildui .gu-ally .gu-soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#guildui .gu-ally .gu-soon { top: 74%; }
#guildui .gu-bossp { height: 100%; display: grid; place-items: center; }

/* ---- no guild: the founding page ---- */
#guildui .gu-make { height: 100%; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 12px; max-width: 1180px; margin: 0 auto; }
#guildui .gu-crest { display: flex; flex-direction: column; text-align: center; overflow-y: auto; }
#guildui .gu-crest h2 { margin: 2px 0 6px; font: 700 24px Mali, sans-serif; color: #fff1cc; word-break: break-all; }
#guildui .gu-crest .gu-lfacts { margin-top: 12px; }
#guildui .gu-preview::before { content: 'ตัวอย่าง'; position: absolute; left: 10px; top: 8px; font: 600 11px Mali, sans-serif; color: #8f877a; }
#guildui .gu-intro { margin: 10px 0 0; padding: 8px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); font: 500 13.5px/1.5 Mali, sans-serif; color: #d8cfbd; text-align: left; word-break: break-word; }
#guildui .gu-setp { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5a3a transparent; }
#guildui .gu-frow { margin-bottom: 12px; }
#guildui .gu-frow label { display: block; margin-bottom: 5px; font: 600 13.5px Mali, sans-serif; color: #e6d3a3; }
#guildui .gu-frow label small { font: 500 11.5px Mali, sans-serif; color: #8f877a; margin-left: 4px; }
#guildui .gu-frow.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#guildui .gu-frow input, #guildui .gu-mform textarea, #guildui .gu-mform input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; outline: 0; background: #23212a; color: #f2ead6; font: 500 14.5px/1.5 Mali, sans-serif; resize: none; }
#guildui .gu-frow input:focus, #guildui .gu-mform textarea:focus, #guildui .gu-mform input:focus { border-color: #d9a443; }
#guildui .gu-embs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
#guildui .gu-embb { min-width: 0; aspect-ratio: 1; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: #121116; cursor: pointer; }
#guildui .gu-embb img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: contain; }
#guildui .gu-embb:hover { border-color: rgba(217, 164, 67, 0.6); }
#guildui .gu-embb.on { border: 2px solid #f2c66a; background: rgba(217, 164, 67, 0.2); box-shadow: 0 0 8px rgba(217, 164, 67, 0.45); }
#guildui .gu-seg { display: flex; }
#guildui .gu-seg button { flex: 1; height: 34px; border: 1px solid rgba(217, 164, 67, 0.35); background: #121116; color: #a89e8a; font: 600 13px Mali, sans-serif; cursor: pointer; }
#guildui .gu-seg button:first-child { border-radius: 4px 0 0 4px; }
#guildui .gu-seg button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
#guildui .gu-seg button.on { background: linear-gradient(#f6d27a, #c99536); color: #2a1c08; border-color: #e0b452; }
#guildui .gu-step { display: flex; align-items: center; height: 34px; border: 1px solid rgba(217, 164, 67, 0.35); border-radius: 4px; background: #121116; }
#guildui .gu-step.sm { width: 260px; }
#guildui .gu-step button { width: 38px; height: 100%; border: 0; background: none; color: #f2c66a; font: 800 18px Fredoka, sans-serif; cursor: pointer; }
#guildui .gu-step button:hover { background: rgba(217, 164, 67, 0.12); }
#guildui .gu-step b { flex: 1; text-align: center; font: 700 14px Fredoka, Mali, sans-serif; color: #f2ead6; }
#guildui .gu-cost { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 10px 12px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); font: 500 13px Mali, sans-serif; color: #c9bfa8; }
#guildui .gu-cost b { display: inline-flex; align-items: center; gap: 5px; font: 800 18px Fredoka, sans-serif; color: #ffe39a; }
#guildui .gu-cost b.short { color: #e86a5a; }
#guildui .gu-cost b img { width: 22px; height: 22px; }
#guildui .gu-cost small { margin-left: auto; color: #8f877a; }
#guildui .gu-mkerr { display: block; min-height: 18px; margin-bottom: 4px; font: 600 12.5px Mali, sans-serif; color: #f08a7a; }

/* ---- windows (LORDNINE's: 75 สิทธิพิเศษกิลด์, 76 จัดการกิลด์, 77 บริจาคกิลด์, 78 ประวัติกิจกรรม) and cards ---- */
#guildui .gu-pop { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(5, 4, 8, 0.55); }
#guildui .gu-card-pop { position: relative; width: min(470px, calc(100% - 24px)); max-height: calc(100% - 40px); overflow-y: auto; padding: 18px 18px 16px; border-radius: 4px;
  background: linear-gradient(#211f27, #141318); border: 1px solid #b8893a; box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.08), 0 18px 50px rgba(0, 0, 0, 0.6); animation: guIn 0.15s ease-out; scrollbar-width: thin; scrollbar-color: #6b5a3a transparent; }
#guildui .gu-card-pop.win { display: flex; flex-direction: column; padding: 14px 22px 20px; border-color: #8a7444; border-top: 2px solid #d9a443; }
#guildui .gu-card-pop.perks { width: min(1000px, calc(100% - 24px)); height: min(700px, calc(100% - 40px)); }
#guildui .gu-card-pop.manage { width: min(820px, calc(100% - 24px)); }
#guildui .gu-card-pop.donate { width: min(1040px, calc(100% - 24px)); }
#guildui .gu-card-pop.history { width: min(1000px, calc(100% - 24px)); height: min(620px, calc(100% - 40px)); }
#guildui .gu-card-pop.emblem { width: min(680px, calc(100% - 24px)); }
#guildui .gu-card-pop.note, #guildui .gu-card-pop.ask { width: min(600px, calc(100% - 24px)); }
#guildui .gu-card-pop.chests { width: min(820px, calc(100% - 24px)); }
#guildui .gu-card-pop.shop { width: min(1180px, calc(100% - 24px)); height: min(680px, calc(100% - 40px)); }
#guildui .gu-card-pop.glist { width: min(1320px, calc(100% - 24px)); height: min(720px, calc(100% - 40px)); }
#guildui .gu-card-pop.buff { width: min(560px, calc(100% - 24px)); }
#guildui .gu-card-pop.help { width: min(660px, calc(100% - 24px)); }
#guildui .gu-card-pop.confirm { width: min(440px, calc(100% - 24px)); }
#guildui .gu-wt { margin: 0; text-align: center; font: 700 22px Mali, sans-serif; color: #f2dfae; }
#guildui .gu-card-pop.win > .gu-orn { width: 92%; margin-bottom: 12px; }
#guildui .gu-wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 2px; background: rgba(0, 0, 0, 0.22); }
#guildui .gu-wbody.list { padding: 8px 10px; }
#guildui .gu-wbody > .gu-scroll { flex: 1; min-height: 0; }
#guildui .gu-wtools { flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
#guildui .gu-x { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: #d8cfbd; font: 700 20px sans-serif; }
#guildui .gu-x:hover { color: #f2c66a; }
#guildui .gu-ptable { flex: 1; min-height: 0; }
#guildui .gu-ptable table { width: 100%; border-collapse: collapse; font: 500 14px Mali, sans-serif; }
#guildui .gu-ptable th { position: sticky; top: 0; z-index: 1; padding: 10px 6px; background: #1f1d24; color: #a89e8a; font-weight: 600; }
#guildui .gu-ptable td { padding: 10px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: center; color: #e8e0cc; line-height: 1.45; }
#guildui .gu-ptable td.o { color: #f0a050; font-weight: 700; }
#guildui .gu-ptable td.x { font-size: 12.5px; color: #b9ae96; }
#guildui .gu-ptable tr.on td { background: rgba(217, 164, 67, 0.14); color: #fff1cc; }
#guildui .gu-ptable tr.past td { color: #b9ae96; }
#guildui .gu-mform { margin: 0; padding: 4px 6px; border: 0; min-width: 0; }
#guildui .gu-mform:disabled { opacity: 0.65; }
#guildui .gu-mrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 12px; margin-bottom: 14px; }
#guildui .gu-mrow > label { padding-top: 8px; font: 700 15px Mali, sans-serif; color: #e6d3a3; }
#guildui .gu-mrow > label small { display: block; font: 500 12px Mali, sans-serif; color: #b98a5a; }
#guildui .gu-mname { display: flex; gap: 10px; }
#guildui .gu-mname .gu-btn { flex: none; height: 40px; min-width: 120px; }
#guildui .gu-checks { display: flex; gap: 60px; padding-top: 4px; }
#guildui .gu-dcards2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#guildui .gu-dcard2 { display: flex; flex-direction: column; align-items: center; padding: 12px 14px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; background: linear-gradient(#24222b, #18171c); }
#guildui .gu-dcard2 h4 { margin: 0; font: 700 19px Mali, sans-serif; color: #f2ead6; }
#guildui .gu-dart { width: 250px; height: 220px; display: grid; place-items: center; }
#guildui .gu-dart img { width: 250px; height: 220px; object-fit: contain; }
#guildui .gu-rw { font: 600 13px Mali, sans-serif; color: #a89e8a; margin: 2px 0 6px; }
#guildui .gu-rwrow { display: flex; gap: 10px; margin-bottom: 26px; }
#guildui .gu-rwrow span { position: relative; width: 74px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; background: #121116; }
#guildui .gu-rwrow span[data-info] { cursor: pointer; }
#guildui .gu-rwrow img { width: 40px; height: 40px; object-fit: contain; }
#guildui .gu-rwrow b { position: absolute; right: 4px; bottom: 3px; font: 700 13px Fredoka, sans-serif; color: #fff; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
#guildui .gu-rwrow em { position: absolute; top: 100%; left: -6px; right: -6px; margin-top: 3px; text-align: center; white-space: nowrap; font: 500 11px Mali, sans-serif; font-style: normal; color: #a89e8a; }
#guildui .gu-dbtn { width: 100%; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #8a7444; border-radius: 2px; cursor: pointer;
  background: linear-gradient(#2f4652, #1b2b33); color: #eef3f2; box-shadow: inset 0 1px 0 rgba(200, 230, 240, 0.18); }
#guildui .gu-dbtn b { font: 700 16px Mali, sans-serif; }
#guildui .gu-dbtn span { display: inline-flex; align-items: center; gap: 6px; padding: 1px 26px; border-radius: 2px; background: rgba(0, 0, 0, 0.35); font: 700 15px Fredoka, sans-serif; }
#guildui .gu-dbtn span img { width: 18px; height: 18px; }
#guildui .gu-dbtn:hover:not(:disabled) { border-color: #e0b452; background: linear-gradient(#3a5664, #22363f); }
#guildui .gu-dbtn:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.5); }
#guildui .gu-dhave2 { margin-top: 6px; font: 500 12px Mali, sans-serif; color: #8f877a; }
#guildui .gu-dleft { margin: 14px 0 0; text-align: center; font: 600 17px Mali, sans-serif; color: #f2ead6; }
#guildui .gu-dleft b { font: 700 19px Fredoka, sans-serif; color: #f2c66a; margin: 0 4px; }
#guildui .gu-hist { margin: 0; padding: 0; list-style: none; }
#guildui .gu-hist li { display: flex; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font: 500 14px/1.45 Mali, sans-serif; color: #d8cfbd; }
#guildui .gu-hist time { flex: none; font: 500 13px Fredoka, sans-serif; color: #8f877a; }
#guildui .gu-embs.big { gap: 8px; }
#guildui .gu-gc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
#guildui .gu-gc-head h3 { margin: 0 0 4px; font: 700 20px Mali, sans-serif; color: #fff1cc; word-break: break-all; }
#guildui .gu-gc-head h3 small { font-size: 12px; color: #c9a85a; }
#guildui .gu-gc-head p { margin: 0; font: 500 12.5px Mali, sans-serif; color: #a89e8a; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#guildui .gu-mport { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(#2c2833, #121116); box-shadow: inset 0 0 0 2px rgba(217, 164, 67, 0.45); }
#guildui .gu-mport img { width: 46px; height: 46px; }
#guildui .gu-bmed { flex: none; width: 90px; height: 90px; }
#guildui .gu-bmed img { width: 100%; height: 100%; }
#guildui .gu-btab { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font: 500 14px Mali, sans-serif; }
#guildui .gu-btab td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #d8cfbd; }
#guildui .gu-btab td:first-child { font: 700 13px Fredoka, sans-serif; color: #a89e8a; width: 60px; }
#guildui .gu-btab td:last-child { text-align: right; font: 600 13px Fredoka, sans-serif; color: #e3c97a; }
#guildui .gu-btab tr.on td { background: rgba(63, 198, 160, 0.12); color: #c8f2e2; }
#guildui .gu-facts { margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
#guildui .gu-facts.three { grid-template-columns: repeat(3, 1fr); }
#guildui .gu-facts div { padding: 6px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); min-width: 0; }
#guildui .gu-facts dt { font: 500 11px Mali, sans-serif; color: #9b927f; }
#guildui .gu-facts dd { margin: 2px 0 0; font: 700 13.5px Mali, sans-serif; color: #f2ead6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#guildui .gu-card-pop .gu-intro { margin: 0 0 10px; }
#guildui .gu-ph2 { margin: 6px 0 6px; font: 600 12.5px Mali, sans-serif; color: #c9a85a; }
#guildui .gu-pnote { margin: 0 0 10px; font: 500 13px/1.6 Mali, sans-serif; color: #b9ae96; }
#guildui .gu-pnote.c { text-align: center; margin: 8px 0 0; }
#guildui .gu-ask { margin: 8px 6px 4px; font: 600 15px/1.6 Mali, sans-serif; color: #f2e6c8; text-align: center; }
#guildui .gu-gcm { display: flex; flex-wrap: wrap; gap: 5px; max-height: 190px; }
#guildui .gu-gchip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 4px; border: 1px solid rgba(217, 164, 67, 0.3); border-radius: 14px; background: #18171c; cursor: pointer; font: 500 12px Mali, sans-serif; color: #e3d9c4; }
#guildui .gu-gchip .gu-role { width: 18px; height: 18px; margin: 0; }
#guildui .gu-gchip img:not(.gu-role) { width: 16px; height: 16px; }
#guildui .gu-gchip b { font: 700 12px Fredoka, sans-serif; color: #f2c66a; }
#guildui .gu-help-l { margin: 0; padding-left: 18px; font: 500 13.5px/1.65 Mali, sans-serif; color: #d8cfbd; user-select: text; }
#guildui .gu-help-l b { color: #f2c66a; }
#guildui .gu-help-l i { font-style: normal; color: #a8e6a0; }
/* check-in + chests window */
#guildui .gu-attrow { display: flex; gap: 14px; align-items: stretch; }
#guildui .gu-check { flex: none; width: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px solid #e0b452; border-radius: 4px; cursor: pointer;
  background: linear-gradient(#f6d27a, #c99536); color: #2a1c08; box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.6); }
#guildui .gu-check img { width: 56px; height: 56px; }
#guildui .gu-check img.gu-ci { width: 16px; height: 16px; }
#guildui .gu-check b { font: 800 19px Mali, sans-serif; }
#guildui .gu-check small { font: 600 11px/1.4 Mali, sans-serif; text-align: center; }
#guildui .gu-check:hover:not(:disabled) { background: linear-gradient(#ffe39a, #d9a443); }
#guildui .gu-check.done { border-color: #4f9a34; background: linear-gradient(#2c3a26, #1d2619); color: #a8e6a0; cursor: default; }
#guildui .gu-attbox { flex: 1; min-width: 0; }
#guildui .gu-attn { font: 500 14px Mali, sans-serif; color: #c9bfa8; }
#guildui .gu-attn b { font: 700 17px Fredoka, sans-serif; color: #7fdc8a; }
#guildui .gu-attn small { color: #8f877a; }
#guildui .gu-attbar { position: relative; height: 8px; margin: 8px 6px 6px; border-radius: 4px; background: #0d0c10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#guildui .gu-attbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(#9be06a, #4f9a34); }
#guildui .gu-attbar em { position: absolute; top: -3px; width: 10px; height: 14px; margin-left: -5px; border-radius: 2px; background: #3a3540; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.5); }
#guildui .gu-attbar em.on { background: #d9a443; }
#guildui .gu-chests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#guildui .gu-chest { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 6px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
#guildui .gu-chest > img { width: 62px; height: 62px; object-fit: contain; filter: grayscale(0.7) brightness(0.7); }
#guildui .gu-chest b { font: 700 13px Mali, sans-serif; color: #c9bfa8; }
#guildui .gu-chest small { font: 600 12px Fredoka, Mali, sans-serif; color: #a8e6a0; display: flex; align-items: center; gap: 2px; }
#guildui .gu-chest.ok > img, #guildui .gu-chest.ready > img { filter: none; }
#guildui .gu-chest.ready { border-color: #e0b452; background: rgba(217, 164, 67, 0.12); animation: guReady 1.4s ease-in-out infinite; }
@keyframes guReady { 50% { box-shadow: inset 0 0 0 1px rgba(255, 227, 154, 0.6), 0 0 10px rgba(217, 164, 67, 0.45); } }
#guildui .gu-chest.got { opacity: 0.6; }
#guildui .gu-chest.got > img { filter: grayscale(1) brightness(0.8); }
#guildui .gu-chest:disabled { cursor: default; }
/* guild shop window */
#guildui .gu-shop { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: min-content; gap: 12px; align-content: start; }
#guildui .gu-scard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 12px 12px; border-radius: 4px; text-align: center; background: linear-gradient(#211f27, #17161b); border: 1px solid rgba(255, 255, 255, 0.08); }
#guildui .gu-scard:hover { border-color: rgba(217, 164, 67, 0.4); }
#guildui .gu-sic { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 6px; cursor: pointer; background: radial-gradient(#2c2833, #121116); box-shadow: inset 0 0 0 2px rgba(217, 164, 67, 0.45); }
#guildui .gu-sic img { width: 64px; height: 64px; object-fit: contain; }
#guildui .gu-sic em { position: absolute; right: 4px; bottom: 2px; font: 700 13px Fredoka, sans-serif; font-style: normal; color: #fff; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
#guildui .gu-sname { font: 700 14px Mali, sans-serif; color: #f2ead6; min-height: 20px; }
#guildui .gu-slim { font: 500 11.5px Mali, sans-serif; color: #9b927f; }
#guildui .gu-scard .gu-btn { margin-top: 4px; font: 700 14px Fredoka, Mali, sans-serif; }
#guildui .gu-slock { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; border-radius: 4px; background: rgba(8, 7, 10, 0.45); pointer-events: none; }
#guildui .gu-slock span { padding: 5px 12px; border-radius: 3px; background: #0d0c10; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.5); font: 700 13px Mali, sans-serif; color: #f2c66a; }
#guildui .gu-sout { position: absolute; top: 10px; right: -4px; padding: 2px 10px; background: #5a2228; color: #ffd9d4; font: 700 11px Mali, sans-serif; transform: rotate(8deg); }
#guildui .gu-scard.out .gu-sic { filter: grayscale(0.6); opacity: 0.7; }

/* ---- a short message inside the screen (the game's toasts sit under it) ---- */
#guildui .gu-say { position: absolute; left: 50%; bottom: 70px; z-index: 6; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 18px; border-radius: 6px;
  background: rgba(14, 12, 18, 0.96); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.55), 0 8px 24px rgba(0, 0, 0, 0.5); font: 600 13.5px Mali, sans-serif; color: #f2e6c8; text-align: center; pointer-events: none; }
#guildui .gu-say.in { animation: guSay 0.22s ease-out; }
@keyframes guSay { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- a phone: one column, the body scrolls ---- */
#guildui.gu-narrow .gu-cur { display: none; }
#guildui.gu-narrow .gu-vit { left: 8px; width: 150px; }
#guildui.gu-narrow .gu-title { right: 4px; gap: 6px; }
#guildui.gu-narrow .gu-title b { font-size: 19px; }
#guildui.gu-narrow .gu-bar1 { height: auto; flex-direction: column; }
#guildui.gu-narrow .gu-tabs { overflow-x: auto; scrollbar-width: none; }
#guildui.gu-narrow .gu-tabs button, #guildui.gu-narrow .gu-tabs.six button { flex: none; width: auto; min-width: 0; height: 38px; padding: 0 12px; font-size: 13.5px; }
#guildui.gu-narrow .gu-tools { margin: 6px 8px; padding: 0; }
#guildui.gu-narrow .gu-tools:empty { display: none; }
#guildui.gu-narrow .gu-field { flex: 1; width: auto; }
#guildui.gu-narrow .gu-bar2 { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
#guildui.gu-narrow .gu-note { white-space: normal; }
#guildui.gu-narrow .gu-body { overflow-y: auto; padding: 6px; }
#guildui.gu-narrow .gu-body.gu-p-info, #guildui.gu-narrow .gu-body.gu-p-up { padding: 0; }
#guildui.gu-narrow .gu-info2, #guildui.gu-narrow .gu-up, #guildui.gu-narrow .gu-make, #guildui.gu-narrow .gu-ally, #guildui.gu-narrow .gu-bank { display: flex; flex-direction: column; height: auto; }
#guildui.gu-narrow .gu-left { border-right: 0; border-bottom: 1px solid rgba(217, 164, 67, 0.22); }
#guildui.gu-narrow .gu-bigemb { flex: none; height: 150px; }
#guildui.gu-narrow .gu-bigemb img { width: 130px; height: 130px; }
#guildui.gu-narrow .gu-right { padding: 0 6px 10px; min-height: 620px; }
#guildui.gu-narrow .gu-subtabs { padding-left: 0; }
#guildui.gu-narrow .gu-subtabs button { flex: 1; width: auto; font-size: 13.5px; }
#guildui.gu-narrow .gu-table.mem2 { --cols: 44px minmax(0, 1fr) 84px 90px; min-height: 360px; }
#guildui.gu-narrow .gu-table.mem2 .gu-head span:nth-child(4), #guildui.gu-narrow .gu-table.mem2 .gu-head span:nth-child(5), #guildui.gu-narrow .gu-table.mem2 .c.ctb, #guildui.gu-narrow .gu-table.mem2 .c.note { display: none; }
#guildui.gu-narrow .gu-memfoot { flex-wrap: wrap; gap: 8px; }
#guildui.gu-narrow .gu-memfoot .gu-btn { min-width: 0; }
#guildui.gu-narrow .gu-table.req2 { --cols: minmax(0, 1fr) 140px; min-height: 300px; }
#guildui.gu-narrow .gu-table.req2 .gu-head span:nth-child(2), #guildui.gu-narrow .gu-table.req2 .gu-head span:nth-child(3), #guildui.gu-narrow .gu-table.req2 .c.st, #guildui.gu-narrow .gu-table.req2 .c.note { display: none; }
#guildui.gu-narrow .gu-table.list { --cols: minmax(0, 1fr) 60px 100px; }
#guildui.gu-narrow .gu-table.list .gu-row .c:nth-child(n+4):nth-child(-n+7), #guildui.gu-narrow .gu-table.list .gu-row .c:nth-child(2),
#guildui.gu-narrow .gu-table.list .gu-head span:nth-child(n+4):nth-child(-n+7), #guildui.gu-narrow .gu-table.list .gu-head span:nth-child(2) { display: none; }
#guildui.gu-narrow .gu-brow { grid-template-columns: 54px repeat(3, 70px) minmax(0, 1fr); height: 96px; padding: 0 6px; }
#guildui.gu-narrow .gu-med, #guildui.gu-narrow .gu-med img { width: 64px; height: 64px; }
#guildui.gu-narrow .gu-diam { width: 36px; height: 36px; }
#guildui.gu-narrow .gu-diamn { font-size: 17px; }
#guildui.gu-narrow .gu-bstate { font-size: 12px; }
#guildui.gu-narrow .gu-upl { padding-bottom: 0; }
#guildui.gu-narrow .gu-dcards2 { grid-template-columns: 1fr; }
#guildui.gu-narrow .gu-shop { grid-template-columns: repeat(2, 1fr); }
#guildui.gu-narrow .gu-mrow { grid-template-columns: 1fr; gap: 4px; }
#guildui.gu-narrow .gu-attrow { flex-direction: column; }
#guildui.gu-narrow .gu-check { width: auto; }
#guildui.gu-narrow .gu-facts.three { grid-template-columns: repeat(2, 1fr); }