/* ══════════ portrait-ui.css — ภาพโปรไฟล์บนการ์ดคน (ตามตัวอย่าง disc-cards) ══════════
   สีทั้งหมดอิงโทเคนของเกม จึงใช้ได้ทั้งธีมมืดและสว่าง · สีเกรดตรึงไว้เหมือนป้ายเกรดทั่วเกม */
:root{--xp-gold:var(--t-e9bb61,#e9bb61);--xp-jade:var(--t-4ade80,#4ade80);--xp-red:var(--t-f87171,#e06b5d);--xp-vio:var(--t-c084fc,#c084fc);
  --xp-card:var(--surface-panel-2);--xp-card2:var(--surface-page-2);--xp-line:var(--border-soft,#2c2c2c);--xp-paper:#3b362f}
[data-theme="light"]{--xp-paper:#cfc6b2}
.g-S{--gc:#f5c542}.g-A{--gc:#c084fc}.g-B{--gc:#60a5fa}.g-C{--gc:#4ade80}.g-D{--gc:#9ca3af}
canvas.xp-cv{display:block}
.xp-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 8px;border-radius:20px;background:var(--xp-card2);color:var(--text-mute);white-space:nowrap}
.xp-chip.xp-jade{background:rgba(74,222,128,.12);color:var(--xp-jade)}.xp-chip.xp-gold{background:rgba(233,187,97,.13);color:var(--xp-gold)}
.xp-chip.xp-red{background:rgba(224,107,93,.13);color:var(--xp-red)}.xp-chip.xp-violet{background:rgba(192,132,252,.13);color:var(--xp-vio)}
.xp-cpv{color:var(--xp-gold);font-weight:700;font-variant-numeric:tabular-nums}
.xp-count{font-size:11px;color:var(--text-dim)}
.xp-gb{position:absolute;font-weight:700;line-height:1;border-radius:5px;background:var(--gc);color:#140f08}
.xp-empty{font-size:11px;color:var(--text-mute);text-align:center;padding:12px 0}

/* หัวรายการ: สลับประเภท + สลับมุมมอง */
.xp-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.xp-bt{font-size:13px;color:var(--text-primary)}
.xp-seg{display:inline-flex;background:var(--xp-card2);border-radius:10px;padding:3px}
.xp-seg button{all:unset;cursor:pointer;padding:5px 12px;border-radius:8px;font-size:12.5px;color:var(--text-mute);touch-action:manipulation}
.xp-seg button[aria-pressed="true"]{background:var(--text-primary);color:var(--surface-page)}
.xp-seg button:focus-visible{outline:2px solid var(--xp-gold)}
.xp-viewseg{margin-left:auto}
.xp-viewseg button{padding:5px 9px;display:inline-flex;align-items:center;gap:4px}
.xp-ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;pointer-events:none}
.xp-hall{margin-bottom:10px}

/* แบบรายการ */
.xp-rows{display:flex;flex-direction:column;gap:8px}
.xp-row{position:relative;display:flex;align-items:stretch;gap:12px;background:var(--xp-card);border:1px solid var(--xp-line);border-radius:14px;padding:8px 12px 8px 8px;cursor:pointer}
.xp-row.ping,.xp-qt.ping{border-color:rgba(245,196,81,.45)}
.xp-pf{position:relative;width:74px;flex:0 0 auto;border-radius:11px;overflow:hidden;border:1.5px solid var(--gc);background:var(--xp-paper)}
.xp-pf canvas{width:100%;height:86px}
.xp-pf .xp-qi{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.55)}
.xp-pf .xp-qi i{display:block;height:100%;background:linear-gradient(90deg,#b88a2c,#e9bb61)}
.xp-pf .xp-gb{top:3px;left:3px;font-size:11px;padding:3px 5px}
.xp-mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.xp-row .xp-nm{font-weight:600;font-size:14.5px;color:var(--text-primary)}
.xp-sub{font-size:11.5px;color:var(--text-mute)}
.xp-tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.xp-right{text-align:right;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px}
.xp-row .xp-cpv{font-size:15px}
.xp-row .xp-cpv small{font-size:9px;color:var(--text-dim);font-weight:500;margin-left:2px}
.xp-rows .clan-row-acts{display:flex;gap:6px;flex-wrap:wrap;margin:-2px 2px 2px}

/* แบบเน้นภาพ */
.xp-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.xp-qt{position:relative;background:var(--xp-card);border:1px solid var(--xp-line);border-radius:11px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.xp-pic{position:relative;border-bottom:2px solid var(--gc);background:var(--xp-paper)}
.xp-qt canvas{width:100%;height:auto;aspect-ratio:4/5}
.xp-qt .xp-gb{top:3px;right:3px;font-size:10px;padding:3px 4px;border-radius:4px}
.xp-sd{position:absolute;top:4px;left:4px;width:9px;height:9px;border-radius:50%;border:1.5px solid #111}
.xp-body{padding:4px 5px 6px;text-align:center;flex:1;display:flex;flex-direction:column}
.xp-qt .xp-nm{font-size:11px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-rk{font-size:9px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-qt .xp-cpv{font-size:11.5px;margin-top:1px}

/* โรงเตี๊ยม */
.xp-innhead{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(120,80,30,.22),var(--xp-card) 70%);border:1px solid var(--xp-line);border-radius:14px;padding:10px 12px;margin:12px 0 10px}
.xp-innt{flex:1;min-width:0}
.xp-innt b{display:block;font-size:16px;color:var(--text-primary)}
.xp-innt span{font-size:11px;color:var(--text-mute)}
.xp-price{font-size:11px;color:var(--text-mute);white-space:nowrap}
.xp-price b{color:var(--xp-gold);font-variant-numeric:tabular-nums}
.xp-hire{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;background:#e9bb61;color:#1a1409;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;touch-action:manipulation}
.xp-hire.done{background:var(--xp-card2);color:var(--text-mute)}
.xp-hire:focus-visible{outline:2px solid var(--text-primary)}
.xp-qt .xp-hire{display:block;width:calc(100% - 8px);margin:7px auto 0;padding:7px 0;font-size:12.5px;border-radius:9px}
.xp-qt .xp-price{font-size:9.5px;margin-top:auto}
.xp-link{all:unset;cursor:pointer;display:block;text-align:center;font-size:11.5px;color:var(--text-mute);padding:6px 0 0}
.xp-terms{background:var(--surface-raised);border:1px solid var(--xp-line);border-radius:16px;padding:14px;width:100%;max-width:340px;margin:auto}
.xp-terms-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.xp-terms .xp-nm{font-weight:700;font-size:14px;color:var(--text-primary)}
.xp-terms-l{font-size:11px;color:var(--text-mute);margin-bottom:6px}
.xp-term{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--xp-card2);border:1px solid var(--xp-line);border-radius:10px;padding:10px 12px;margin-bottom:6px;font-size:13px;color:var(--text-primary)}
.xp-term b{color:var(--xp-gold)}

/* หัวการ์ดสมาชิก */
.mem-banner.xp-mb{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--macc) 18%,var(--surface-raised)),var(--surface-raised) 70%)}
.xp-mbpic{position:relative;border-radius:14px;overflow:hidden;border:1.5px solid var(--gc);background:var(--xp-paper);align-self:stretch;min-height:140px}
.xp-mbpic canvas{width:118px;height:100%;min-height:140px}
.xp-mbpic .xp-gb{left:5px;top:5px;font-size:12px;padding:3px 6px;border-radius:6px}
.xp-mbinfo{min-width:0;padding-right:26px}
.xp-role{font-size:11px;color:var(--macc)}
.xp-mbnm{font-size:21px;font-weight:700;line-height:1.25;color:var(--text-primary)}
.xp-mbrk{font-size:12px;color:var(--text-mute)}
.xp-tal{display:inline-block;margin-top:5px;font-size:10.5px;color:var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent);border-radius:20px;padding:1px 8px}
.xp-cprow{display:flex;align-items:baseline;gap:6px;margin-top:6px;font-size:11px;color:var(--text-dim)}
.xp-cprow .xp-cpv{font-size:22px}
.xp-qibar{margin-top:6px}
.xp-qibar div{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-mute)}
.xp-qibar s{display:block;height:5px;border-radius:3px;background:var(--xp-card2);overflow:hidden;text-decoration:none}
.xp-qibar s i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#7dd3fc)}

/* จัดทีม: กระดาน 2×3 แบบด่านล่าอสูร คอลัมน์ขวาคือแถวหน้า */
.xp-teamwrap{background:var(--xp-card);border:1px solid var(--xp-line);border-radius:16px;padding:10px;margin-bottom:9px}
.xp-teamhd{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:10.5px;color:var(--text-dim);margin:0 2px 6px}
.xp-teamhd span:last-child{text-align:right;color:var(--xp-gold)}
.xp-team{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:86px;gap:8px}
.xp-ts{position:relative;display:flex;background:var(--xp-card2);border:1px solid var(--xp-line);border-radius:12px;overflow:hidden;cursor:pointer;min-width:0}
.xp-ts.front{box-shadow:inset -3px 0 0 #e9bb61}
.xp-ts.me{border-color:rgba(233,187,97,.55);cursor:default}
.xp-tpic{position:relative;width:66px;flex:0 0 auto;background:var(--xp-paper);border-right:1.5px solid var(--gc,#e9bb61)}
.xp-tpic canvas{width:66px;height:100%}
.xp-tpic .xp-gb{top:4px;left:4px;font-size:9.5px;padding:2px 4px}
.xp-ts.me .xp-gb{--gc:#e9bb61}
.xp-tpic.xp-pup{display:grid;place-items:center;background:var(--xp-card);color:var(--xp-vio)}
.xp-tpic.xp-pup .gi-svg{width:28px;height:28px}
.xp-tbody{flex:1;min-width:0;padding:7px 10px 6px 8px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.xp-ts .xp-nm{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-ts .xp-cpv{font-size:11px}
.xp-tmod{font-size:9.5px;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-ts.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;border-style:dashed;color:var(--text-dim);font-size:12px;background:transparent}
.xp-ts.empty i{font-style:normal;font-size:9px;margin-top:2px}
.xp-arrow{text-align:right;font-size:10.5px;color:var(--xp-red);margin-top:6px}

/* ผังตระกูล */
.xp-treelink{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.xp-tl-ring{width:40px;height:40px;border-radius:50%;padding:2px;background:#f5c542;flex:0 0 auto}
.xp-tl-ring canvas{width:100%;height:100%;border-radius:50%}
.xp-tl-t{flex:1;min-width:0;text-align:left}
.xp-tl-t b{display:block;font-size:11px;color:var(--xp-gold)}
.xp-tl-t span{font-size:8.5px;color:var(--text-mute)}
.xp-tl-c{color:var(--text-dim);font-size:16px}
.xp-treecard{padding:16px 10px 12px}
.xp-tree{position:relative}
.xp-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;fill:none;stroke:var(--text-dim);stroke-width:1.5;opacity:.6}
.xp-gen{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;position:relative;margin-bottom:22px;padding-left:18px}
.xp-gen:last-child{margin-bottom:0}
.xp-glbl{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-dim);writing-mode:vertical-rl}
.xp-node{text-align:center;width:96px;position:relative;z-index:1;background:var(--xp-card2);border:1px solid var(--xp-line);border-radius:12px;padding:6px 4px 5px;cursor:pointer}
.xp-ring{width:62px;height:62px;margin:0 auto;border-radius:50%;padding:3px;background:var(--gc)}
.xp-node.big .xp-ring{width:80px;height:80px}
.xp-ring canvas{width:100%;height:100%;border-radius:50%;background:var(--xp-paper)}
.xp-node .xp-nm{font-size:11.5px;margin-top:4px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-node .xp-sub{font-size:10px;color:var(--text-dim)}

/* ผู้มาขอฝากตัว */
.xp-appcard{margin-bottom:10px}
.xp-apps-h{font-size:12px;font-weight:700;color:var(--xp-gold);margin:0 2px 8px}
.xp-apps-h span{font-size:11px;color:var(--text-mute);margin-left:4px}
.xp-apps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.xp-app{background:var(--xp-card);border:1px solid var(--xp-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.xp-apic{position:relative;background:var(--xp-paper)}
.xp-apic canvas{width:100%;height:auto;aspect-ratio:1;transition:filter .9s ease,opacity .9s ease}
.xp-apic.hide canvas{filter:brightness(0);opacity:.88}
.xp-apic::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:rgba(233,187,97,.75);transition:opacity .6s}
.xp-apic:not(.hide)::after{opacity:0}
.xp-abody{padding:8px 10px 10px;display:flex;flex-direction:column;flex:1}
.xp-anm{font-weight:600;color:var(--text-primary);display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.xp-anm i{font-style:normal;font-size:9.5px;color:var(--text-dim);font-weight:400}
.xp-hint{font-size:11.5px;color:var(--t-a78bfa,#c4a8ff);font-style:italic;margin:2px 0 6px}
.xp-app .xp-tags{margin:0 0 8px}
.xp-app .xp-hire{display:block;margin-top:auto;padding:7px;font-size:12.5px;border-radius:9px}
.xp-reveal{background:var(--surface-raised);border:1px solid var(--xp-line);border-radius:18px;padding:14px;width:100%;max-width:280px;margin:auto;text-align:center}
.xp-reveal .xp-apic{border-radius:12px;overflow:hidden;border:1.5px solid var(--gc);margin-bottom:10px}
.xp-rv-nm{font-size:18px;font-weight:700;color:var(--text-primary)}
.xp-rv-sub{font-size:11.5px;color:var(--text-mute);margin-bottom:12px}
.xp-reveal .xp-hire{display:block;padding:9px}
@media (prefers-reduced-motion:reduce){.xp-apic canvas,.xp-apic::after{transition:none}}

/* ภาพของผู้เล่นเป็นเงาดำ */
canvas.xp-cv.xp-shadow{filter:grayscale(1) brightness(.16) contrast(1.8) drop-shadow(0 0 1px rgba(233,187,97,.55))}
/* ชิปเกรดสีตามเกรด · ชิปลักษณะสีตามหมวด */
.xp-chip.xp-gchip{color:var(--gc);background:color-mix(in srgb,var(--gc) 15%,transparent)}
.xp-tc-0{color:#f87171;background:rgba(248,113,113,.13)}.xp-tc-1{color:#60a5fa;background:rgba(96,165,250,.13)}
.xp-tc-2{color:#4ade80;background:rgba(74,222,128,.12)}.xp-tc-3{color:#c084fc;background:rgba(192,132,252,.13)}
.xp-tc-4{color:#fbbf24;background:rgba(251,191,36,.13)}.xp-tc-5{color:#5eead4;background:rgba(94,234,212,.12)}
[data-theme="light"] .xp-tc-0{color:#b42318}[data-theme="light"] .xp-tc-1{color:#1d5fbf}[data-theme="light"] .xp-tc-2{color:#1f7a3f}
[data-theme="light"] .xp-tc-3{color:#7a35b8}[data-theme="light"] .xp-tc-4{color:#8a5a00}[data-theme="light"] .xp-tc-5{color:#0f766e}