/* Floralia · the bag page (Y), full screen - js/bagpage.js (2026-10-22, the user picked C3 on bagpick3.html: "เอาหน้ากระเป๋านี้ใส่เกมเลย").
   The skill page's dress (css/skillpage.css): dark plum, a thin gold frame, its corners, divider and tile; Prompt for reading. */
#bagp { position: fixed; inset: 0; z-index: 60; display: flex; background: rgba(6, 4, 12, 0.78); }
#bagp[hidden] { display: none; }
#bagp:not([hidden]) { align-items: center; justify-content: center; }
#bagp {
  --ink: #f3ead6; --dim: #c9c0ae; --gold: #ffe08a; --line2: rgba(201, 162, 74, 0.45); --up: #8fe67c; --dn: #ff8a7a;
  --g0: #c9c2b0; --g1: #7fd36e; --g2: #5fb4ff; --g3: #b77bff; --g4: #ffb340; --g5: #ff5a5a;
}
#bagp .bp-in { position: relative; display: flex; flex-direction: column; width: min(100vw, 177.78vh); height: min(100vh, 56.25vw); padding: 12px 16px 10px; box-sizing: border-box;
  color: var(--ink); font: 400 clamp(11px, 1vw, 16px) / 1.35 Prompt, Mali, sans-serif; letter-spacing: .005em; user-select: none;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 200, 110, .10), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(140, 90, 200, .10), transparent 70%), linear-gradient(180deg, #221a2c 0%, #16111e 55%, #100c16 100%);
  border: 2px solid #c9a24a; box-shadow: inset 0 0 0 4px #1a1320, inset 0 0 0 5px #6a5026, inset 0 0 60px rgba(0, 0, 0, .55); }
#bagp *, #bagp *::before, #bagp *::after { box-sizing: border-box; }
#bagp button { font: inherit; color: inherit; cursor: pointer; }
#bagp .sp { flex: 1; }
#bagp .dim { color: var(--dim); } #bagp .sm { font-size: .86em; } #bagp .up { color: var(--up); } #bagp .dn { color: var(--dn); }

/* ---- top ---- */
#bagp .bp-top { display: flex; align-items: center; gap: .7em; padding: 0 .2em .6em; border-bottom: 1px solid var(--line2); }
#bagp .bp-top h2 { margin: 0; font-size: 1.75em; font-weight: 700; background: linear-gradient(180deg, #fff6c8, #ffd36a 55%, #d99a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #3a2410); }
#bagp .bp-top h2 small { font-size: .5em; font-weight: 500; margin-left: .5em; -webkit-text-fill-color: #cfc4a8; }
#bagp .pill { display: inline-flex; align-items: center; gap: .35em; padding: .2em .75em; border-radius: 99px; background: #241b2c; border: 1px solid #5a4320; font-weight: 600; font-size: .9em; }
#bagp .pill img { width: 1.35em; height: 1.35em; object-fit: contain; }
#bagp .btn { padding: .45em .9em; border-radius: .7em; border: 1px solid #8a6a2e; background: linear-gradient(180deg, #34283c, #241b2c); font-weight: 600; font-size: .9em; white-space: nowrap; }
#bagp .btn:hover { border-color: #e0b858; }
#bagp .btn:disabled { opacity: .5; cursor: default; }
#bagp .btn.sortauto.on { border-color: #8fe67c; color: #c8ffb8; background: linear-gradient(180deg, #2c4a2a, #1c2e1a); }   /* (the auto-sort switch, on) */
#bagp .btn.gold { position: relative; overflow: hidden; color: #2c1a08; border-color: #fff0b0; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); box-shadow: 0 .15em .4em rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
#bagp .btn.gold::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .5s; }
#bagp .btn.gold:hover::after { left: 120%; }
#bagp .bp-x { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: .75em; border: 1px solid #c9a24a; background: linear-gradient(180deg, #4a3418, #2a1c0c); color: var(--gold); font-weight: 800; }

/* ---- three columns of one height, each with the skill page's corners and divider ---- */
#bagp .bp-body { flex: 1; display: grid; grid-template-columns: 28% minmax(0, 1fr) 29%; gap: 1em; padding-top: .9em; min-height: 0; }
#bagp .col { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: .8em; border: 1px solid #7a5c26;
  background: linear-gradient(180deg, rgba(34, 26, 44, .92), rgba(18, 13, 24, .94)), url(../assets/ui_skillpage/panel_bg.jpg) center / 14em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 .4em 1.2em rgba(0, 0, 0, .35); }
#bagp .col > .cn { position: absolute; width: 2.2em; height: 2.2em; background: url(../assets/ui_skillpage/frame_corner.png) center / contain no-repeat; z-index: 8; pointer-events: none; }
#bagp .col > .cn.a { left: -.35em; top: -.35em; } #bagp .col > .cn.b { right: -.35em; top: -.35em; transform: scaleX(-1); }
#bagp .col > .cn.c { left: -.35em; bottom: -.35em; transform: scaleY(-1); } #bagp .col > .cn.d { right: -.35em; bottom: -.35em; transform: scale(-1, -1); }
#bagp .chead { position: relative; display: flex; align-items: center; gap: .3em; padding: .2em .5em 0; min-height: 2.6em; }
#bagp .chead::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -.55em; height: 1.1em; background: url(../assets/ui_skillpage/divider.png) center / 100% 100% no-repeat; pointer-events: none; }
#bagp .chead b.t { padding: 0 .3em; font-size: 1.05em; font-weight: 600; background: linear-gradient(180deg, #fff3c0, #ffc95a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#bagp .tab { padding: .35em .7em; border: 0; background: none; color: var(--dim); font-weight: 600; border-radius: .5em .5em 0 0; }
#bagp .tab.on { color: var(--gold); box-shadow: inset 0 -.18em 0 #ffb340; }
#bagp .cbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .55em; padding: 1em .7em .7em; overflow-y: auto; }
#bagp .cbody::-webkit-scrollbar, #bagp .grid::-webkit-scrollbar { width: .45em; }
#bagp .cbody::-webkit-scrollbar-thumb, #bagp .grid::-webkit-scrollbar-thumb { background: #5a4320; border-radius: 1em; }

/* ---- the item square: gear on its grade's colour (softened), anything else on a quiet dark tile ----
   (clipped by clip-path, not overflow: hidden - that let the grid count a row of them as 0 tall, so the second row sat on the first) */
#bagp .s { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: .7em; border: 0; padding: 0; background-color: #1a1420; background-size: 100% 100%; box-shadow: 0 .15em .4em rgba(0, 0, 0, .5); clip-path: inset(0 round .7em); transition: transform .15s ease, filter .15s ease; }
/* #bagp .s.gear: its grade picture is set inline (js/bagpage.js slotHtml) */
#bagp .s.quiet { background: radial-gradient(circle at 50% 40%, #2c2433, #17121c 75%); box-shadow: inset 0 0 0 .12em color-mix(in srgb, var(--gc) 55%, #2a2030), 0 .15em .4em rgba(0, 0, 0, .5); }
#bagp .s img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; z-index: 1; pointer-events: none; }
#bagp .s .pl, #bagp .s .n { position: absolute; z-index: 3; font-weight: 700; color: #fff; -webkit-text-stroke: .22em #241a2c; paint-order: stroke fill; line-height: 1; }
#bagp .s .pl { right: .25em; top: .2em; font-size: 1.15em; }   /* (bigger, 2026-10-23, the user: "เพิ่มเลข + ให้ดูใหญ่กว่านี้") */
#bagp .s .n { right: .3em; bottom: .28em; font-size: .76em; }
#bagp .s .gem { position: absolute; left: .32em; bottom: .32em; z-index: 3; width: .62em; height: .62em; transform: rotate(45deg); background: var(--sc); border: .1em solid #1a1220; box-shadow: 0 0 .3em var(--sc); }
#bagp .s .bt { position: absolute; left: .25em; top: .22em; z-index: 3; font-size: .8em; font-weight: 700; color: var(--up); -webkit-text-stroke: .2em #12301a; paint-order: stroke fill; }
#bagp .s .nw { position: absolute; left: .2em; top: .2em; z-index: 4; padding: .05em .35em; border-radius: .4em; background: #ff5a7a; color: #fff; font-size: .6em; font-weight: 700; }
#bagp .s .lk { position: absolute; right: .2em; bottom: .2em; z-index: 4; font-size: .7em; }
/* the old bag's marks (2026-10-23, the user: "ระดับของอาวุธที่เป็น I II III IV": as the old MIR4 bag had them, css/style.css):
   the set tier a colour gem bottom left (bronze - silver - gold - red - sky blue, the user: "ใช้สัญลักษณ์ของสีแทนเซ็ต"), the craft step a gold serif
   Roman numeral top left (ใหม่ / ▲ move right of it), not appraised a small ? disc bottom right (the lock beside it), the
   collection book left middle, cards socketed right middle */
#bagp .s .stp { position: absolute; z-index: 3; font: 900 1.4em/1 'Times New Roman', Georgia, serif; letter-spacing: -.04em; -webkit-text-stroke: .16em #1a1008; paint-order: stroke fill; pointer-events: none; }
#bagp .s .stp { left: .24em; top: .16em; font-size: 1.05em; color: #ffd76a; }
#bagp .s.gear .gem { left: .38em; bottom: .38em; width: .78em; height: .78em; border-width: .12em; }
#bagp .s:has(.stp) :is(.nw, .bt) { left: 2em; }
#bagp .s .unk { position: absolute; right: .25em; bottom: .25em; z-index: 4; width: 1.25em; height: 1.25em; display: grid; place-items: center; border-radius: 50%; background: #f4f1ea; color: #2a1a10; font-size: .9em; font-weight: 800; }
#bagp .s:has(.unk) .lk { right: 1.45em; }
#bagp .s .cl { position: absolute; left: .2em; top: 42%; z-index: 3; transform: translateY(-50%); font-size: .85em; }
#bagp .s:hover { filter: brightness(1.12); transform: translateY(-.12em); }
#bagp .s.sel { outline: .16em solid #fff3c0; outline-offset: .06em; box-shadow: 0 0 1em rgba(255, 224, 138, .85); z-index: 4; }
#bagp .s.g4::after, #bagp .s.g5::after { content: ''; position: absolute; inset: -40%; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 200, .55) 50%, transparent 58%); animation: bp-shine 3.2s ease-in-out infinite; }
@keyframes bp-shine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
#bagp .s.ghost { background: rgba(10, 6, 16, .6); }
#bagp .s.ghost img { filter: grayscale(1) brightness(1.6); opacity: .3; }
#bagp .s.pulse { animation: bp-pulse 1s ease-in-out infinite; z-index: 5; }
@keyframes bp-pulse { 0%, 100% { box-shadow: 0 0 0 .14em #fff3c0, 0 0 .4em rgba(255, 224, 138, .6); } 50% { box-shadow: 0 0 0 .2em #fff3c0, 0 0 1.4em rgba(255, 224, 138, 1); } }
#bagp .well { aspect-ratio: 1; border-radius: .7em; background: rgba(0, 0, 0, .28); box-shadow: inset 0 .1em .35em rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(201, 162, 74, .12); }

/* ---- the doll: a backdrop drawn for it, the hero on its pedestal, the worn pieces on two arcs ---- */
#bagp .doll { position: relative; flex: 1; min-height: 14em;   /* (a set shape, not stretched by a tall screen - the user: "รู้สึกว่ามันยาวๆ") */ border-radius: .6em; overflow: hidden; box-shadow: inset 0 0 1.6em rgba(0, 0, 0, .45);
  background: radial-gradient(ellipse 60% 45% at 50% 48%, rgba(255, 214, 140, .3), transparent 70%), linear-gradient(180deg, #2a2040, #140f1e); }
#bagp .doll.art { background-color: #140f1e; background-position: center bottom; background-size: cover; background-repeat: no-repeat; }   /* (the picture: an inline background-image - a url() in a variable would resolve under css/) */
#bagp .doll .ped { position: absolute; left: 50%; bottom: 10.5%; width: 58%; height: 11%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 236, 180, .55), rgba(201, 162, 74, .25) 45%, rgba(40, 28, 12, .6) 75%); border: .14em solid rgba(224, 184, 88, .8); box-shadow: 0 0 1.4em rgba(255, 210, 120, .35); }
#bagp .doll.art .ped { display: none; }
#bagp .doll canvas.hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#bagp .doll .rail { position: absolute; top: 0; bottom: 0; width: 26%; z-index: 1; pointer-events: none; }
#bagp .doll .rail.l { left: 0; background: linear-gradient(90deg, rgba(10, 6, 16, .72), rgba(10, 6, 16, .45) 60%, transparent); }
#bagp .doll .rail.r { right: 0; background: linear-gradient(270deg, rgba(10, 6, 16, .72), rgba(10, 6, 16, .45) 60%, transparent); }
#bagp .doll .ds { position: absolute; width: 18%; z-index: 2; }
#bagp .doll .ds .s { border: .16em solid color-mix(in srgb, var(--gc) 45%, #e8c26a); box-shadow: 0 0 0 .1em #140e1a, 0 .35em .8em rgba(0, 0, 0, .7), 0 0 .9em color-mix(in srgb, var(--gc) 70%, transparent); }
#bagp .doll .ds .s .pl { font-size: 1.3em; }
#bagp .doll .ds .s.ghost { border: .14em solid rgba(232, 194, 106, .35); box-shadow: inset 0 0 .8em rgba(0, 0, 0, .6), 0 .3em .7em rgba(0, 0, 0, .5); }   /* (an empty slot: a solid faint rim, no dashes - the user: "แก้ไม่เอาเส้นประ") */
#bagp .doll .delta { position: absolute; left: 50%; top: 0; z-index: 6; padding: .1em .45em; border-radius: .4em; font-size: .72em; font-weight: 700; white-space: nowrap; background: #12301a; border: 1px solid #4a8a3a; color: var(--up); transform: translate(-50%, -110%); }
#bagp .doll .delta.dn { background: #3a1616; border-color: #8a3a3a; color: var(--dn); }
#bagp .doll .cp { position: absolute; left: 50%; bottom: 2.2%; transform: translateX(-50%); z-index: 3; display: flex; align-items: baseline; gap: .45em; padding: .25em 1.1em .3em; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(20, 14, 28, .82), rgba(10, 7, 14, .9)); border: 1px solid rgba(224, 184, 88, .7); box-shadow: 0 0 1em rgba(255, 200, 110, .18); }
#bagp .doll .cp small { font-size: .74em; color: #cfc4a8; font-weight: 600; }
#bagp .doll .cp b { font-size: 1.15em; font-weight: 700; background: linear-gradient(180deg, #fff6c8, #ffc95a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#bagp .doll .bgs { position: absolute; left: 50%; top: .5em; transform: translateX(-50%); z-index: 3; display: flex; gap: .3em; opacity: .55; transition: opacity .2s; }
#bagp .doll:hover .bgs { opacity: 1; }
#bagp .doll .bgs button { width: 1.3em; height: 1.3em; border-radius: 50%; border: 1px solid rgba(255, 240, 200, .6); background-size: cover; background-position: center; padding: 0; }
#bagp .doll .bgs button.on { border: 2px solid #ffe08a; box-shadow: 0 0 .4em #ffe08a; }
#bagp .doll::before, #bagp .doll::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(2px 2px at 18% 30%, #fff, transparent), radial-gradient(2px 2px at 80% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 58%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 66%, #fff, transparent); animation: bp-twinkle 3.4s ease-in-out infinite; opacity: .5; }
#bagp .doll::after { background: radial-gradient(1.5px 1.5px at 42% 20%, #fff, transparent), radial-gradient(2px 2px at 60% 16%, #fff, transparent), radial-gradient(1.5px 1.5px at 24% 72%, #fff, transparent), radial-gradient(2px 2px at 84% 70%, #fff, transparent); animation-delay: 1.7s; }
@keyframes bp-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
#bagp .mini { display: grid; grid-template-columns: 1fr 1fr; gap: .35em; }
#bagp .mini div { display: flex; align-items: center; gap: .4em; padding: .35em .55em; border-radius: .55em; background: rgba(0, 0, 0, .28); border: 1px solid rgba(201, 162, 74, .25); font-size: .86em; }
#bagp .mini img { width: 1.5em; height: 1.5em; object-fit: contain; }
#bagp .mini span { flex: 1; color: var(--dim); } #bagp .mini b { color: #fff3c0; }
#bagp .setline { display: flex; align-items: center; gap: .5em; font-size: .84em; flex-wrap: wrap; }

/* ---- the stats and sets tabs ---- */
#bagp .statlist { display: grid; gap: .3em; }
#bagp .statlist div { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .55em; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 162, 74, .2); }
#bagp .statlist img { width: 1.7em; height: 1.7em; object-fit: contain; }
#bagp .statlist span { flex: 1; color: var(--dim); } #bagp .statlist b { color: #fff3c0; }
:is(#bagp, #itempop) .setcard2 { padding: .6em .7em; border-radius: .7em; background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 10%, rgba(20, 15, 26, .9)), rgba(14, 10, 18, .9)); border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); display: flex; flex-direction: column; gap: .4em; }
:is(#bagp, #itempop) .setcard2 .sh { display: flex; align-items: center; justify-content: space-between; }
:is(#bagp, #itempop) .setcard2 .sh b { color: var(--sc); font-size: 1.05em; }
:is(#bagp, #itempop) .setcard2 .cnt { font-weight: 700; font-size: 1.3em; color: #fff3c0; } :is(#bagp, #itempop) .setcard2 .cnt small { font-size: .65em; color: var(--dim); }
:is(#bagp, #itempop) .setcard2 .pics { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3em; }
#bagp .sp1 { position: relative; aspect-ratio: 1; border-radius: .5em; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#bagp .sp1 img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
#bagp .sp1.on { background: color-mix(in srgb, var(--sc) 22%, #1a1420); box-shadow: inset 0 0 0 .12em var(--sc), 0 0 .6em color-mix(in srgb, var(--sc) 50%, transparent); }
#bagp .sp1.wait img { opacity: .45; filter: grayscale(.4); }
#bagp .sp1.wait i { position: absolute; right: .1em; bottom: 0; font-style: normal; font-size: .7em; }
:is(#bagp, #itempop) .sbar { position: relative; height: .45em; border-radius: 99px; background: rgba(0, 0, 0, .4); }
:is(#bagp, #itempop) .sbar i { display: block; height: 100%; border-radius: 99px; background: var(--sc); box-shadow: 0 0 .5em var(--sc); }
:is(#bagp, #itempop) .sbar u { position: absolute; top: -.15em; width: .12em; height: .75em; background: #fff8; }
:is(#bagp, #itempop) .step { display: grid; grid-template-columns: 5em 1fr auto; align-items: center; gap: .4em; padding: .3em .5em; border-radius: .5em; background: rgba(0, 0, 0, .25); font-size: .86em; color: var(--dim); }
:is(#bagp, #itempop) .step b { font-size: .92em; } :is(#bagp, #itempop) .step em { font-style: normal; font-size: .85em; padding: 0 .45em; border-radius: 99px; background: rgba(255, 255, 255, .08); color: #e9dcc0; }
:is(#bagp, #itempop) .step.got { background: rgba(70, 160, 80, .18); color: #c8f5bf; } :is(#bagp, #itempop) .step.got b { color: #8fe67c; }
:is(#bagp, #itempop) .setcard2 .hint { font-size: .8em; color: #ffd76a; }
#bagp .note { font-size: .84em; color: var(--dim); margin: 0; }

/* ---- the bag ---- */
#bagp .filters { display: flex; gap: .3em; flex-wrap: wrap; }
#bagp .chip { padding: .3em .7em; border-radius: 99px; border: 1px solid #5a4320; background: #241b2c; font-weight: 600; font-size: .86em; white-space: nowrap; }
#bagp .chip em { font-style: normal; margin-left: .3em; padding: 0 .4em; border-radius: 99px; background: rgba(0, 0, 0, .4); font-size: .85em; }
#bagp .chip.on { background: linear-gradient(180deg, #5a4318, #33240e); border-color: #e0b858; color: var(--gold); }
#bagp .chip.better { border-color: #4a8a3a; color: #c8f5bf; }
#bagp .chip.better.on { background: linear-gradient(180deg, #2e5a30, #1a361c); border-color: #8be37b; color: #e8ffe0; }
#bagp .tools { display: flex; gap: .35em; align-items: center; }
#bagp .search { flex: 0 1 12em; min-width: 6em; padding: .35em .7em; border-radius: .6em; border: 1px solid #5a4320; background: #120e17; color: var(--ink); font: inherit; font-size: .86em; }
#bagp .search:focus { outline: none; border-color: #e0b858; }
#bagp .grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .5em; align-content: start; overflow-y: auto; padding: .2em .3em .2em .1em; }
#bagp .empty { grid-column: 1 / -1; text-align: center; color: var(--dim); padding: 2em 0; }
#bagp .meters { display: grid; grid-template-columns: auto 1fr auto; gap: .3em .6em; align-items: center; font-size: .84em; padding-top: .5em; border-top: 1px solid var(--line2); }
#bagp .bar { height: .5em; border-radius: 99px; background: #2a2032; overflow: hidden; }
#bagp .bar i { display: block; height: 100%; border-radius: 99px; }
#bagp .bar i.ok { background: linear-gradient(90deg, #c9a24a, #ffe08a); } #bagp .bar i.warn { background: linear-gradient(90deg, #d8782a, #ffb35c); } #bagp .bar i.full { background: linear-gradient(90deg, #c03a3a, #ff6a6a); }
#bagp .meters b.warn { color: #ffb35c; } #bagp .meters b.full { color: #ff8a8a; }

/* ---- the item card ---- */
#bagp .card .hd { display: flex; gap: .9em; align-items: center; }
#bagp .card .hd .hdslot { width: 5.4em; flex: none; }
#bagp .card .nm { font-size: 1.25em; font-weight: 700; line-height: 1.2; }
#bagp .tags { display: flex; gap: .3em; margin-top: .3em; flex-wrap: wrap; }
#bagp .tag { display: inline-block; padding: .1em .55em; border-radius: 99px; border: 1px solid; font-size: .8em; font-weight: 600; }
#bagp .tag.on { color: var(--up); border-color: #4a8a3a; }
#bagp .cmp { border: 1px solid rgba(201, 162, 74, .3); border-radius: .6em; overflow: hidden; font-size: 1em; }
#bagp .cmp .r { display: grid; grid-template-columns: 1fr 8em 4.5em; align-items: center; gap: .3em; padding: .45em .7em; }
#bagp .cmp .r > b { color: #fff; font-weight: 700; }
#bagp .cmp .df { margin-left: .4em; padding: 0 .35em; border-radius: .4em; font-style: normal; font-size: .78em; font-weight: 700; }
#bagp .cmp .df.up { color: #a8f59a; background: rgba(80, 200, 90, .18); } #bagp .cmp .df.dn { color: #ff9a8a; background: rgba(220, 80, 80, .18); }
#bagp .cmp .r.h { background: rgba(201, 162, 74, .15); color: var(--gold); font-weight: 600; }
#bagp .cmp .r:nth-child(even) { background: rgba(255, 255, 255, .03); }
#bagp .cmp .r > :not(:first-child) { text-align: right; }
#bagp .cpb { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .4em; margin: .5em 0; border-radius: .7em; font-weight: 700; font-size: 1.05em; }
#bagp .cpb.c-up { background: linear-gradient(90deg, transparent, rgba(80, 200, 90, .25), transparent); color: #a8f59a; }
#bagp .cpb.c-dn { background: linear-gradient(90deg, transparent, rgba(220, 80, 80, .25), transparent); color: #ff9a8a; }
#bagp .cpb.c-eq { background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .2), transparent); color: var(--gold); }
#bagp .opts { margin: .6em 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: .6em; overflow: hidden; }
#bagp .opts .oh { padding: .35em .7em; background: rgba(255, 255, 255, .06); color: var(--gold); font-weight: 600; font-size: .9em; }
#bagp .opt { display: flex; justify-content: space-between; padding: .38em .7em; font-size: .95em; color: #e8dcc0; }
#bagp .opt:nth-child(odd) { background: rgba(255, 255, 255, .03); } #bagp .opt b { font-weight: 700; }
#bagp .opt.q3 { color: #ffd76a; } #bagp .opt.q2 { color: #b77bff; } #bagp .opt.q1 { color: #5fb4ff; }
#bagp .desc { padding: .6em; border-radius: .6em; background: rgba(0, 0, 0, .25); font-size: .9em; line-height: 1.5; color: #e9dcc0; }
#bagp .acts { margin-top: auto; display: flex; flex-direction: column; gap: .4em; }
#bagp .acts .main { width: 100%; padding: .55em; font-size: 1.15em; border-radius: .7em; }
#bagp .acts .row { display: flex; gap: .35em; } #bagp .acts .row .btn { flex: 1; text-align: center; }
#bagp .acts small { display: block; font-size: .78em; opacity: .85; }
#bagp .shops { display: grid; gap: .3em; }
#bagp .shop { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .08em; padding: .4em .05em .35em; min-height: 4.6em; min-width: 0; border-radius: .7em; border: 1px solid rgba(217, 164, 67, .55);
  background: linear-gradient(180deg, rgba(58, 44, 30, .9), rgba(30, 22, 16, .95)); box-shadow: inset 0 1px 0 rgba(255, 230, 160, .15); font-weight: 600; font-size: .8em; transition: transform .15s; }
#bagp .shop:hover { transform: translateY(-.1em); border-color: #ffd76a; box-shadow: 0 0 0 1px rgba(255, 215, 106, .35), 0 .3em .7em rgba(0, 0, 0, .4); }
#bagp .shop img { width: 2.1em; height: 2.1em; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
#bagp .shop span { font-size: .92em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bagp .shop small { font-size: .78em; color: #ffd76a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bagp .shop.off small { color: #ff9a8a; }

@media (prefers-reduced-motion: reduce) { #bagp .s.g4::after, #bagp .s.g5::after, #bagp .s.pulse, #bagp .doll::before, #bagp .doll::after { animation: none; } }
/* a narrow screen: the columns stack, the bag first */
@media (max-width: 760px) {
  #bagp .bp-body { grid-template-columns: 1fr; overflow-y: auto; }
  #bagp .bp-body > .col:nth-child(2) { order: -1; min-height: 60vh; }
  #bagp .doll { min-height: 22em; }
  #bagp .grid { grid-template-columns: repeat(6, 1fr); }
}
/* ---- the "+" after the last slot and its box of slots to buy (js/bagpage.js St.add) ---- */
#bagp .s.add { display: grid; place-items: center; cursor: pointer; background: rgba(217, 164, 67, .06); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, .45); transition: background .15s, box-shadow .15s; }
#bagp .s.add span { font: 300 2.2em/1 Prompt, sans-serif; color: #e8c477; }
#bagp .s.add:hover, #bagp .s.add.on { background: rgba(217, 164, 67, .16); box-shadow: inset 0 0 0 1px #ffd76a, 0 0 .8em rgba(255, 215, 106, .35); }
#bagp .bp-addpop { position: absolute; left: 1em; right: 1em; bottom: 4.2em; z-index: 9; padding: .9em 1em 1em; border-radius: .7em; background: linear-gradient(180deg, rgba(28, 23, 34, .98), rgba(14, 11, 18, .98));
  border: 1px solid rgba(201, 162, 74, .75); box-shadow: 0 1em 2.4em rgba(0, 0, 0, .6); }
#bagp .bp-addpop .hd { display: flex; align-items: center; justify-content: space-between; }
#bagp .bp-addpop .hd b { font-size: 1.1em; color: #ffe3a0; }
#bagp .bp-addpop .x { width: 1.9em; height: 1.9em; border-radius: .4em; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #cfc7b6; cursor: pointer; }
#bagp .bp-addpop > small { display: block; margin: .25em 0 .7em; color: #a9a294; font-size: .82em; }
#bagp .bp-addpop .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5em, 1fr)); gap: .5em; }
#bagp .bp-addpop .opts button { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .55em .4em; border-radius: .5em; cursor: pointer; color: #2c1a08; border: 1px solid #fff0b0;
  background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a); font: 600 .95em Prompt, sans-serif; }
#bagp .bp-addpop .opts button small { font-size: .78em; font-weight: 500; color: #4a2c0c; }
#bagp .bp-addpop .opts button:disabled { cursor: default; filter: grayscale(1); opacity: .45; }

/* the collection book mark is the game's collection icon (the user picked look A of five, 2026-10-23) */
#bagp .s .cl img { width: 1.5em; height: 1.5em; display: block; filter: drop-shadow(0 0 .12em #000) drop-shadow(0 0 .12em #000); }
#bagp .s .cl { font-size: 1em; }
/* a potion / elixir / dish in one line (useInfo): the effect, its value, then its time as a chip */
#bagp .use1 { display: flex; align-items: center; justify-content: space-between; margin: .6em 0 .35em; padding: .6em .9em; border-radius: .6em; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1); }
#bagp .use1 span { font-size: 1.1em; font-weight: 600; color: #f2ead6; }
#bagp .use1 b { font: 800 1.4em/1 Fredoka, Prompt, sans-serif; color: #8fe67c; }
#bagp .use1c { display: inline-block; align-self: flex-start; width: max-content; margin-bottom: .5em; padding: .15em .7em; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font-size: .85em; color: #d6cbb0; }
#bagp .setbox { margin: .6em 0; }   /* (the set combo in the ค่าพลัง tab) */
/* the character page's worn slots: the set gem and the craft step as in the bag (js/charinfo.js setMarks); 1 id + 3 classes like
   style.css's .bk-slot > b, or the :is(... > *) rule makes them relative and they fall out of place */
#charpanel .bk .bk-slots .bk-slot > .ci-gem { position: absolute; right: 8px; bottom: 26px; z-index: 3; width: 11px; height: 11px; transform: rotate(45deg); background: var(--sc); border: 2px solid #1a1220; box-shadow: 0 0 5px var(--sc); }
#charpanel .bk .bk-slots .bk-slot > .ci-stp { position: absolute; right: 7px; top: 4px; z-index: 3; font: 900 15px/1 'Times New Roman', Georgia, serif; color: #ffd76a; -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; pointer-events: none; }