/* gradetier.css — the colour grades of gear pieces (js/gradetier.js), the bag's look A (assets/gen/nightcamp_tier_bag_a):
   cream cells with a thick frame in the grade colour, a soft glow from ล้ำค่า up, a pulse on ตำนาน, a dark starry cell for
   ราตรี; the forge's ขัดเกรด tab (look A: Papa Moo beside it, js/npcwin.js) and the refine card's safety stone. Sizes in --u. */
:root { --g0: #ece6d8; --g1: #7fe07a; --g2: #6fb6ff; --g3: #c792ff; --g4: #ffc94d; --g5: #ff4f86; }

/* ---------------- the bag (look A, assets/gen/nightcamp_tier_bag_a_raw.png): the cell's own border in the grade colour
   (a thin navy line outside it), a tint inside, a glow from ล้ำค่า up, sparkles on ตำนาน, a dark swirl in ราตรี ---- */
.iv-wrap .r-g0 { --gb: #8a7e6c; --gl: 0, 0, 0; background: linear-gradient(#fbf7ee, #e2d8c4); }
.iv-wrap .r-g1 { --gb: #4cc244; --gl: 127, 224, 122; background: linear-gradient(#f3fcee, #c3ebb5); }
.iv-wrap .r-g2 { --gb: #3d9cf0; --gl: 111, 182, 255; background: linear-gradient(#eef6ff, #b1d6fa); }
.iv-wrap .r-g3 { --gb: #a86cf2; --gl: 199, 146, 255; background: linear-gradient(#f6eeff, #cdb0f5); }
.iv-wrap .r-g4 { --gb: #f0a818; --gl: 255, 196, 60; background: radial-gradient(circle at 50% 30%, #fffbe0 0%, #ffe08a 45%, #f3b83a 100%); }
.iv-wrap .r-g5 { --gb: #ff3d7f; --gl: 255, 79, 134; background: radial-gradient(circle at 50% 38%, #85204f, #2b0d27 78%); }
.iv-wrap .iv-cell[class*=" r-g"], .iv-wrap .iv-big[class*=" r-g"] {
  border: calc(5 * var(--u)) solid var(--gb); border-radius: calc(14 * var(--u));
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.55), inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.08);
}
.iv-wrap .iv-cell.r-g5, .iv-wrap .iv-big.r-g5 { box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), inset 0 calc(3 * var(--u)) 0 rgba(255, 160, 200, 0.25); }
.iv-wrap .iv-cell.r-g3, .iv-wrap .iv-big.r-g3 { box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), 0 0 calc(12 * var(--u)) calc(2 * var(--u)) rgba(var(--gl), 0.75), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.55); }
.iv-wrap .iv-cell.r-g4, .iv-wrap .iv-big.r-g4, .iv-wrap .iv-cell.r-legend:not(.sel) { box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), 0 0 calc(16 * var(--u)) calc(4 * var(--u)) rgba(var(--gl), 0.95), inset 0 0 0 calc(2 * var(--u)) #fff1a8, inset 0 0 calc(14 * var(--u)) rgba(255, 255, 255, 0.55); animation: gtGold 1.8s ease-in-out infinite; }
.iv-wrap .iv-cell.r-g5, .iv-wrap .iv-big.r-g5 { box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), 0 0 calc(14 * var(--u)) calc(3 * var(--u)) rgba(var(--gl), 0.8); animation: gtNight 3.2s ease-in-out infinite; }
.iv-wrap .iv-cell[class*=" r-g"].sel { box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 calc(14 * var(--u)) calc(6 * var(--u)) rgba(80, 170, 255, 0.95); animation: none; }
.iv-wrap .iv-big { position: relative; overflow: hidden; }
.iv-wrap .iv-cell[class*=" r-g"] canvas { position: absolute; z-index: 1; }
.iv-wrap .iv-big[class*=" r-g"] canvas { position: relative; z-index: 1; }
.iv-wrap .iv-cell[class*=" r-g"] > b, .iv-wrap .iv-cell[class*=" r-g"] > i { z-index: 3; }
/* ตำนาน: four twinkling sparkles over the cell (Codex art) and a shine sweeping across it; ราตรี: the nebula turns behind */
.iv-wrap .iv-cell.r-g4::after, .iv-wrap .iv-big.r-g4::after, .iv-wrap .iv-cell.r-legend::after {
  content: ''; position: absolute; inset: calc(-6 * var(--u)); z-index: 2; pointer-events: none;
  background: url(../assets/grade/fx_sparkle.png) no-repeat, url(../assets/grade/fx_sparkle.png) no-repeat, url(../assets/grade/fx_sparkle.png) no-repeat, url(../assets/grade/fx_sparkle.png) no-repeat;
  background-size: 40% 40%, 26% 26%, 22% 22%, 16% 16%; background-position: 96% 0%, 2% 64%, 70% 100%, 24% 4%;
  filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(255, 220, 120, 0.9)); animation: gtTwinkle 2.2s ease-in-out infinite;
}
.iv-wrap .iv-cell.r-g4::before, .iv-wrap .iv-big.r-g4::before, .iv-wrap .iv-cell.r-legend::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: calc(9 * var(--u));
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.75) 47%, rgba(255, 250, 210, 0.2) 53%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; animation: gtShine 3.2s ease-in-out infinite;
}
.iv-wrap .iv-cell.r-g5::before, .iv-wrap .iv-big.r-g5::before {
  content: ''; position: absolute; inset: 2%; z-index: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: url(../assets/grade/fx_swirl.jpg) center / cover no-repeat; animation: gtSpin 9s linear infinite;
}
@keyframes gtPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes gtGold { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.12) saturate(1.2); } }
@keyframes gtShine { 0%, 55% { background-position: 140% 0; } 100% { background-position: -60% 0; } }
@keyframes gtNight { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) saturate(1.15); } }
@keyframes gtSpin { to { transform: rotate(360deg); } }
@keyframes gtTwinkle {
  0%, 100% { opacity: 0.55; background-size: 34% 34%, 28% 28%, 14% 14%, 20% 20%; }
  33% { opacity: 1; background-size: 44% 44%, 18% 18%, 24% 24%, 12% 12%; }
  66% { opacity: 0.8; background-size: 30% 30%, 30% 30%, 16% 16%, 22% 22%; }
}
/* pieces that are not kept per copy (job starter gear, quest items) keep their old rarity, now drawn the same way */
.iv-wrap .iv-cell.r-common, .iv-wrap .iv-cell.r-rare, .iv-wrap .iv-cell.r-epic, .iv-wrap .iv-cell.r-legend {
  border: calc(5 * var(--u)) solid var(--gb); border-radius: calc(14 * var(--u));
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.55), inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.08);
}
.iv-wrap .iv-cell.r-common { --gb: #8a7e6c; background: linear-gradient(#fbf7ee, #e2d8c4); }
.iv-wrap .iv-cell.r-rare { --gb: #3d9cf0; background: linear-gradient(#eef6ff, #b1d6fa); }
.iv-wrap .iv-cell.r-epic { --gb: #a86cf2; background: linear-gradient(#f6eeff, #cdb0f5); }
.iv-wrap .iv-cell.r-legend { --gb: #f0a818; --gl: 255, 196, 60; background: radial-gradient(circle at 50% 30%, #fffbe0 0%, #ffe08a 45%, #f3b83a 100%); }
.iv-wrap .iv-cell.r-legend canvas { position: absolute; z-index: 1; }
.iv-wrap .iv-cell.r-common.sel, .iv-wrap .iv-cell.r-rare.sel, .iv-wrap .iv-cell.r-epic.sel, .iv-wrap .iv-cell.r-legend.sel {
  box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 calc(14 * var(--u)) calc(6 * var(--u)) rgba(80, 170, 255, 0.95);
}
/* a weapon the job can't hold: a lighter grey than before (it read as "white" in the tinted cells), its ✕ beside the stars */
.iv-wrap .iv-cell[class*=" r-g"].nojob canvas { filter: grayscale(0.55) brightness(0.92); }

/* ---------------- the item card of a gear piece: the name band, the grade written big, the big framed icon ---------------- */
.iv-detail[class*="rd-g"] { display: flex; flex-direction: column; }
.iv-detail.rd-g0 { --gc: #e9e1cf; --gt: #2a2435; }
.iv-detail.rd-g1 { --gc: #7fe07a; --gt: #2a2435; box-shadow: inset 0 0 0 calc(3 * var(--u)) #4fae4a, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-g2 { --gc: #6fb6ff; --gt: #2a2435; box-shadow: inset 0 0 0 calc(3 * var(--u)) #4f8fd6, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-g3 { --gc: #c792ff; --gt: #2a2435; box-shadow: inset 0 0 0 calc(3 * var(--u)) #8f6ad6, 0 0 calc(14 * var(--u)) rgba(199, 146, 255, 0.4), 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-g4 { --gc: #ffc94d; --gt: #2a2435; box-shadow: inset 0 0 0 calc(3 * var(--u)) #c9973a, 0 0 calc(16 * var(--u)) rgba(255, 201, 77, 0.5), 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail.rd-g5 { --gc: #ff4f86; --gt: #fff; box-shadow: inset 0 0 0 calc(3 * var(--u)) #d13d72, 0 0 calc(18 * var(--u)) rgba(255, 79, 134, 0.55), 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3); }
.iv-detail[class*="rd-g"] > .iv-name {
  order: -3; margin: calc(-16 * var(--u)) calc(-18 * var(--u)) calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u));
  border-radius: calc(15 * var(--u)) calc(15 * var(--u)) 0 0; border-bottom: calc(4 * var(--u)) solid var(--ink);
  background: linear-gradient(color-mix(in srgb, var(--gc) 70%, #fff), var(--gc)); color: var(--gt) !important; text-shadow: none; font-size: calc(24 * var(--u));
}
.iv-detail.rd-g5 > .iv-name { background: linear-gradient(#ff7aa4, #b8325e); -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.iv-detail[class*="rd-g"] > .iv-type { order: -2; }
.iv-detail[class*="rd-g"] > .iv-type b { display: block; margin: 0; font: 800 calc(30 * var(--u)) / 1.15 'Baloo 2', 'Mitr', sans-serif; letter-spacing: 0.02em;
  text-shadow: 0 0 calc(12 * var(--u)) var(--gc), 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.5); }
.iv-detail.rd-g0 > .iv-type b { text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, 0.5); }
.iv-detail[class*="rd-g"] > .iv-stars { order: -1; }
.iv-detail[class*="rd-g"] > .iv-hero { flex-direction: column; }
.iv-detail[class*="rd-g"] .iv-big { width: calc(172 * var(--u)); height: calc(172 * var(--u)); border-radius: calc(20 * var(--u)); }
.iv-detail[class*="rd-g"] .iv-main { align-self: stretch; text-align: center; }
/* the option rows: ◆ ดี, ★ เทพ, a pink ◆ special */
.gb-opt.t1::before { content: '◆ '; color: #6fb6ff; }
.gb-opt.t2::before { content: '★ '; color: #ffc94d; }
.gb-opt.t0::before { content: '· '; color: #9ca1c4; }
.gb-opt[data-sp]::before { content: '◆ '; color: #ff9be0; }

/* the grade on the card, the copies list's tag, the night line */
.gt-line { display: flex; align-items: baseline; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  background: rgba(255, 255, 255, 0.06); border-left: calc(5 * var(--u)) solid #7fd2f5; font: 400 calc(14.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #d9dcf2; }
.gt-line b { flex: none; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); color: #e6f8ff; font-weight: 700; }
.gt-night { margin-top: calc(4 * var(--u)); font: 600 calc(14.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #ff8fb4; }
.gt-tag { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin: 0 0 0 calc(6 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: 99px; font: 700 normal calc(12 * var(--u)) / 1.6 'Mitr', sans-serif;
  color: #fff; background: #2f3452; vertical-align: middle; }

/* ---------------- the forge: ขัดเกรด ---------------- */
.gt-wrap { display: grid; grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr); gap: calc(14 * var(--u)); min-height: calc(470 * var(--u)); }
.gt-list { display: flex; flex-direction: column; gap: calc(6 * var(--u)); max-height: calc(520 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(16 * var(--u));
  background: #efe4c9; border: calc(3 * var(--u)) solid #d4c6a6; }
.gt-item { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); cursor: pointer; text-align: left; border-radius: calc(12 * var(--u));
  border: calc(3 * var(--u)) solid var(--ink); background: #fffaf0; box-shadow: inset calc(6 * var(--u)) 0 0 var(--gc); font-family: 'Mitr', sans-serif; color: var(--ink); }
.gt-item.on { background: #dff0ff; }
.gt-item img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex: none; }
.gt-item span { min-width: 0; display: flex; flex-direction: column; }
.gt-item b { font: 600 calc(14.5 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-item small { font: 500 calc(12.5 * var(--u)) / 1.2 'Mitr', sans-serif; color: var(--gc); -webkit-text-stroke: calc(0.4 * var(--u)) var(--ink); }
.gt-item.g0 { --gc: #b8ae98; } .gt-item.g1 { --gc: var(--g1); } .gt-item.g2 { --gc: var(--g2); } .gt-item.g3 { --gc: var(--g3); } .gt-item.g4 { --gc: var(--g4); } .gt-item.g5 { --gc: var(--g5); }
.gt-main { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #fffaf0;
  border: calc(3 * var(--u)) solid #d4c6a6; color: var(--ink); font-family: 'Mitr', sans-serif; }
.gt-pair { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.gt-slot { position: relative; width: calc(104 * var(--u)); height: calc(104 * var(--u)); flex: none; display: grid; place-items: center; border-radius: calc(16 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#f7f2e7, #dcd2be); box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--gc); }
.gt-slot img { width: 76%; height: 76%; object-fit: contain; }
.gt-slot i { position: absolute; bottom: calc(-12 * var(--u)); left: 50%; transform: translateX(-50%); padding: 0 calc(10 * var(--u)); border-radius: 99px; background: var(--gc);
  border: calc(3 * var(--u)) solid var(--ink); font: 800 normal calc(13 * var(--u)) / 1.5 'Baloo 2', sans-serif; color: #1b1e33; white-space: nowrap; }
.gt-slot.g0 { --gc: var(--g0); } .gt-slot.g1 { --gc: var(--g1); } .gt-slot.g2 { --gc: var(--g2); } .gt-slot.g3 { --gc: var(--g3); box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--gc), 0 0 calc(14 * var(--u)) rgba(199, 146, 255, 0.8); }
.gt-slot.g4 { --gc: var(--g4); box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--gc), 0 0 calc(16 * var(--u)) rgba(255, 201, 77, 0.85); }
.gt-slot.g5 { --gc: var(--g5); background: radial-gradient(circle at 50% 35%, #6a1d4a, #2c0f2e 70%); box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--gc), 0 0 calc(18 * var(--u)) rgba(255, 79, 134, 0.85); }
.gt-slot.g5 i { color: #fff; }
.gt-sname { font: 700 calc(17 * var(--u)) / 1.3 'Mitr', sans-serif; }
.gt-arrow { font: 800 calc(34 * var(--u)) / 1 'Baloo 2', sans-serif; color: #3b8fdc; }
.gt-gives { flex: 1; min-width: 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #f3ead6; font: 400 calc(14.5 * var(--u)) / 1.4 'Mitr', sans-serif; }
.gt-gives b { display: block; font-weight: 700; }
.gt-row { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(8 * var(--u)); }
.gt-chance { font: 600 calc(20 * var(--u)) / 1 'Mitr', sans-serif; }
.gt-chance b { font: 800 calc(32 * var(--u)) / 1 'Baloo 2', sans-serif; color: #2f7fd0; }
.gt-pity { flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(10 * var(--u)); font: 600 calc(15 * var(--u)) / 1.3 'Mitr', sans-serif; }
.gt-pity i { grid-column: 2; grid-row: 1; height: calc(14 * var(--u)); border-radius: 99px; background: linear-gradient(#7fcaf8, #3b8fdc); border: calc(2.5 * var(--u)) solid var(--ink); min-width: calc(14 * var(--u)); justify-self: start; }
.gt-pity small { grid-column: 1 / span 2; font: 400 calc(12.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #6a6078; }
.gt-cost { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(16 * var(--u)); font: 600 calc(15.5 * var(--u)) / 1.3 'Mitr', sans-serif; }
.gt-cost span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.gt-cost img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); object-fit: contain; }
.gt-cost .bad { color: #c0394a; } .gt-cost small { font-weight: 400; color: #6a6078; }
.gt-warn { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #ffe2dc; color: #b52e3f; font: 600 calc(14.5 * var(--u)) / 1.35 'Mitr', sans-serif; }
.gt-safe { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #e2f5dc; color: #2f7a35; font: 600 calc(14.5 * var(--u)) / 1.35 'Mitr', sans-serif; }
.gt-toggle { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); cursor: pointer; text-align: left; border-radius: calc(14 * var(--u));
  border: calc(3 * var(--u)) solid var(--ink); background: #f3ead6; font-family: 'Mitr', sans-serif; color: var(--ink); }
.gt-toggle img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; }
.gt-toggle span { flex: 1; display: flex; flex-direction: column; }
.gt-toggle b { font: 700 calc(16 * var(--u)) / 1.25 'Mitr', sans-serif; }
.gt-toggle small { font: 400 calc(12.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #6a6078; }
.gt-toggle i { font: 700 normal calc(14 * var(--u)) / 1.8 'Mitr', sans-serif; padding: 0 calc(12 * var(--u)); border-radius: 99px; border: calc(2.5 * var(--u)) solid var(--ink); background: #cfd1dc; }
.gt-toggle.on i { background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(2.5 * var(--u)) var(--ink); paint-order: stroke fill; }
.gt-toggle:disabled { opacity: 0.5; cursor: default; }
.gt-go { height: calc(58 * var(--u)); font-size: calc(22 * var(--u)); }
.gt-note { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #6a6078; }
.gt-note img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.gt-res { padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); font: 600 calc(15 * var(--u)) / 1.35 'Mitr', sans-serif; }
.gt-res.ok { background: #e2f5dc; color: #2f7a35; } .gt-res.bad { background: #ffe2dc; color: #b52e3f; }
.gt-maxed { font: 700 calc(18 * var(--u)) / 1.4 'Mitr', sans-serif; color: #b8325e; }
.gt-empty { padding: calc(40 * var(--u)); text-align: center; font: 400 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #6a6078; }
.gt-legend { display: flex; justify-content: center; gap: calc(16 * var(--u)); margin-top: calc(12 * var(--u)); font: 600 calc(13.5 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); }
.gt-legend span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }


/* the refine card: the safety stone */
.rf-safe img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); vertical-align: middle; margin-right: calc(4 * var(--u)); }

/* ---------------- the forge's ขัดเกรด tab, look A (assets/gen/nightcamp_tier_forge_a_raw.png) ---------------- */
.gt2 { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u)) 0; color: var(--ink); font-family: 'Mitr', sans-serif; }
.gt2-pick { display: flex; align-items: center; gap: calc(10 * var(--u)); font: 600 calc(16 * var(--u)) / 1 'Mitr', sans-serif; }
.gt2-pick select { flex: 1; height: calc(38 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #fffaf0; color: var(--ink); font: 600 calc(15.5 * var(--u)) / 1 'Mitr', sans-serif; }
.gt2-top { display: flex; align-items: flex-start; gap: calc(18 * var(--u)); }
.gt2-slotw { display: flex; flex-direction: column; align-items: center; width: calc(150 * var(--u)); }
.gt2-slot {
  position: relative; width: calc(140 * var(--u)); height: calc(140 * var(--u)); display: grid; place-items: center; box-sizing: border-box; overflow: hidden;
  border-radius: calc(16 * var(--u)); border: calc(6 * var(--u)) solid var(--gb, #8a7e6c); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink);
  background: linear-gradient(#fbf7ee, #e2d8c4);
}
.gt2-slot img { width: 76%; height: 76%; object-fit: contain; margin-bottom: calc(18 * var(--u)); }
.gt2-stars { position: absolute; left: 0; right: 0; bottom: 0; height: calc(28 * var(--u)); display: grid; place-items: center; background: rgba(32, 30, 52, 0.82);
  font: 400 calc(19 * var(--u)) / 1 sans-serif; color: #ffcf4a; letter-spacing: calc(1 * var(--u)); }
.gt2-stars i { font-style: normal; color: #555a7a; }
.gt2-stars { font: 800 calc(17 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; letter-spacing: 0; } /* (the Lv it needs, 2026-10-20: no stars) */
.gt2-slot.g1 { --gb: #4cc244; background: linear-gradient(#f3fcee, #c3ebb5); }
.gt2-slot.g2 { --gb: #3d9cf0; background: linear-gradient(#eef6ff, #9fcbf7); }
.gt2-slot.g3 { --gb: #a86cf2; background: linear-gradient(#f6eeff, #c9a8f5); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 0 calc(18 * var(--u)) calc(4 * var(--u)) rgba(199, 146, 255, 0.85); }
.gt2-slot.g4 { --gb: #f0a818; background: radial-gradient(circle at 50% 30%, #fffbe0, #ffe08a 45%, #f3b83a); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 0 calc(18 * var(--u)) calc(4 * var(--u)) rgba(255, 196, 60, 0.9); }
.gt2-slot.g5 { --gb: #ff3d7f; background: radial-gradient(circle at 50% 38%, #85204f, #2b0d27 78%); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 0 calc(18 * var(--u)) calc(4 * var(--u)) rgba(255, 79, 134, 0.85); }
.gt2-pill { margin-top: calc(-16 * var(--u)); z-index: 1; padding: 0 calc(18 * var(--u)); border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: var(--gb, #e9e1cf);
  color: #fff; font: 700 calc(17 * var(--u)) / 1.55 'Mitr', sans-serif; -webkit-text-stroke: calc(3.5 * var(--u)) var(--ink); paint-order: stroke fill; }
.gt2-pill.g0 { --gb: #cfc6b2; } .gt2-pill.g1 { --gb: #4cc244; } .gt2-pill.g2 { --gb: #3d9cf0; } .gt2-pill.g3 { --gb: #a86cf2; } .gt2-pill.g4 { --gb: #f0a818; } .gt2-pill.g5 { --gb: #ff3d7f; }
.gt2-slotw > b { margin-top: calc(6 * var(--u)); max-width: 100%; text-align: center; font: 700 calc(17 * var(--u)) / 1.25 'Mitr', sans-serif; }
.gt2-arrow { align-self: center; margin-top: calc(-40 * var(--u)); width: calc(52 * var(--u)); height: calc(44 * var(--u)); background: linear-gradient(#7fcaf8, #3b8fdc);
  clip-path: polygon(0 28%, 55% 28%, 55% 0, 100% 50%, 55% 100%, 55% 72%, 0 72%); }
.gt2-gives { flex: 1; align-self: center; margin-top: calc(-30 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d4c6a6;
  font: 600 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif; text-align: center; }
.gt2-gives b { display: block; color: #b8325e; }
.gt2-box { border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d4c6a6; }
.gt2-chance { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(64 * var(--u)); padding: 0 calc(18 * var(--u)); }
.gt2-pct { font: 700 calc(22 * var(--u)) / 1 'Mitr', sans-serif; white-space: nowrap; }
.gt2-pct b { font: 800 calc(32 * var(--u)) / 1 'Baloo 2', sans-serif; color: #2f7fd0; margin-left: calc(6 * var(--u)); }
.gt2-div { width: calc(2 * var(--u)); height: 60%; background: #d4c6a6; }
.gt2-pity { flex: 1; display: flex; flex-direction: column; gap: calc(6 * var(--u)); font: 600 calc(17 * var(--u)) / 1 'Mitr', sans-serif; }
.gt2-pity i { display: block; height: calc(16 * var(--u)); border-radius: 99px; border: calc(2.5 * var(--u)) solid var(--ink); background: #e9e1d2; overflow: hidden; }
.gt2-pity s { display: block; height: 100%; background: linear-gradient(#7fcaf8, #3b8fdc); }
.gt2-chance small { align-self: flex-start; margin-top: calc(12 * var(--u)); font: 500 calc(14 * var(--u)) / 1 'Mitr', sans-serif; color: #5a5268; white-space: nowrap; }
.gt2-cost { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.gt2-costs { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(30 * var(--u)); }
.gt2-costs > span { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.gt2-costs > span > img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); padding: calc(4 * var(--u)); box-sizing: border-box; object-fit: contain; border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #e8f2fb; }
.gt2-costs > span > span { display: flex; flex-direction: column; font: 700 calc(18 * var(--u)) / 1.2 'Mitr', sans-serif; }
.gt2-costs b { color: #c0811c; } .gt2-costs b.gt2-coin { color: var(--ink); font-size: calc(20 * var(--u)); }
.gt2-costs small { font: 500 calc(13 * var(--u)) / 1.2 'Mitr', sans-serif; color: #6a6078; }
.gt2-costs .bad b, .gt2-costs .bad span { color: #c0394a; }
.gt2-warn { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #ffe2dc; color: #c32a3e; font: 700 calc(18 * var(--u)) / 1.2 'Mitr', sans-serif; }
.gt2-warn i { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(24 * var(--u)); flex: none; background: #f2b632; color: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); font: 800 normal calc(15 * var(--u)) / 1.9 'Baloo 2', sans-serif; }
.gt2-warn small { margin-left: auto; font: 600 calc(14 * var(--u)) / 1 'Mitr', sans-serif; color: #5a5268; }
.gt2-warn.ok { background: #e2f5dc; color: #2f7a35; }
.gt2-warn.ok i { clip-path: none; border-radius: 50%; background: #4cc244; color: #fff; }
.gt2-bottom { display: flex; align-items: stretch; gap: calc(14 * var(--u)); }
.gt2-toggles { flex: 1; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.gt2-tog { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(76 * var(--u)); padding: 0 calc(14 * var(--u)); border-color: var(--ink); }
.gt2-tog > img { width: calc(54 * var(--u)); height: calc(54 * var(--u)); padding: calc(4 * var(--u)); box-sizing: border-box; object-fit: contain; border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #ece2fb; }
.gt2-tog > span { flex: 1; display: flex; flex-direction: column; font: 700 calc(18 * var(--u)) / 1.25 'Mitr', sans-serif; }
.gt2-tog small { font: 500 calc(14 * var(--u)) / 1.3 'Mitr', sans-serif; color: #4a4258; }
.gt2-sw { position: relative; width: calc(76 * var(--u)); height: calc(36 * var(--u)); flex: none; cursor: pointer; border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: #cfd1dc; padding: 0; }
.gt2-sw i { position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #fff; border: calc(2.5 * var(--u)) solid var(--ink); box-sizing: border-box; transition: left 0.15s; }
.gt2-sw span { position: absolute; right: calc(9 * var(--u)); top: 50%; transform: translateY(-50%); font: 800 calc(14 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
.gt2-sw.on { background: linear-gradient(#7fcaf8, #3b8fdc); }
.gt2-sw.on i { left: calc(100% - 30 * var(--u)); }
.gt2-sw.on span { right: auto; left: calc(9 * var(--u)); }
.gt2-sw:disabled { opacity: 0.5; cursor: default; }
.kw-btn.gold.gt2-go { width: calc(190 * var(--u)); height: auto; min-height: calc(96 * var(--u)); align-self: center; border-radius: calc(18 * var(--u)); font: 800 calc(32 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill; }
.gt-legend span { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(2.5 * var(--u)) solid var(--ink); background: #fffaf0; }

/* the forge window is wider than the mockup's: the tab's content a size up so it reads as big as the mockup */
#forge .gt2, #forge .gt-legend { zoom: 1.16; }

/* a piece's own grade on Uncle Coco's gear tab, its row and its card (js/shopwin.js gTint); the bag's tints, without its frame */
.sp-gimg.r-g0, .sp-cimg.r-g0 { background: linear-gradient(#fbf7ee, #e2d8c4); }
.sp-gimg.r-g1, .sp-cimg.r-g1 { background: linear-gradient(#f3fcee, #c3ebb5); }
.sp-gimg.r-g2, .sp-cimg.r-g2 { background: linear-gradient(#eef6ff, #b1d6fa); }
.sp-gimg.r-g3, .sp-cimg.r-g3 { background: linear-gradient(#f6eeff, #cdb0f5); }
.sp-gimg.r-g4, .sp-cimg.r-g4 { background: radial-gradient(circle at 50% 30%, #fffbe0 0%, #ffe08a 45%, #f3b83a 100%); }
.sp-gimg.r-g5, .sp-cimg.r-g5 { background: radial-gradient(circle at 50% 38%, #85204f, #2b0d27 78%); }

/* ---------------- the grade's gems (2026-10-20 player feedback: a piece takes its rarity's colour everywhere, as its name
   in the forge's lists; the grade is shown by 0-5 gems instead of a colour): one painted ice-blue gem per step, the same
   for every grade (assets/grade/gem_on.png, Codex, tools/gtgems_cut.py), its empty slot (gem_off.png) where all five are
   shown (cards, the forge); ราตรี's five shimmer. --gs = a gem's height (the picture is 47 x 64). ---------------- */
.gt-gems { --gs: calc(13 * var(--u)); display: inline-flex; align-items: center; gap: calc(1.5 * var(--u)); font-style: normal; vertical-align: middle; pointer-events: none; }
.gt-gems s { display: block; flex: none; width: calc(var(--gs) * 0.734); height: var(--gs); text-decoration: none; background: url(../assets/grade/gem_off.png) center / contain no-repeat; }
.gt-gems s.on { background-image: url(../assets/grade/gem_on.png); }
.gt-gems.top s.on { animation: gtGem 2.4s ease-in-out infinite; }
.gt-gems s.nw { animation: gtGemNew 1.1s ease-in-out infinite; }
@keyframes gtGem { 50% { filter: brightness(1.2) drop-shadow(0 0 calc(4 * var(--u)) rgba(170, 230, 255, 0.95)); } }
@keyframes gtGemNew { 50% { transform: scale(1.3); filter: brightness(1.15) drop-shadow(0 0 calc(5 * var(--u)) rgba(170, 230, 255, 1)); } }
/* where they sit: a bag cell's top-left corner, a worn slot's, the copies tag, the card's lines, the forge */
.iv-cell .gt-gems.cell { --gs: calc(12 * var(--u)); gap: calc(0.5 * var(--u)); position: absolute; left: calc(4 * var(--u)); top: calc(3 * var(--u)); }
.iv-cell:has(.gt-gems.cell) .gb-shiny { top: auto; bottom: calc(18 * var(--u)); }
.iv-sbox .gt-gems.slot { --gs: calc(13 * var(--u)); gap: calc(0.5 * var(--u)); position: absolute; left: calc(4 * var(--u)); top: calc(3 * var(--u)); z-index: 1; }
.gt-tag .gt-gems { --gs: calc(11 * var(--u)); gap: calc(0.5 * var(--u)); }
.gt-line .gt-gems { --gs: calc(14 * var(--u)); }

/* the gear card (js/wcard.js): the เกรดขัด line under the type, the help box's gems */
.wc-polish .gt-gems { --gs: calc(18 * var(--u)); gap: calc(1 * var(--u)); }
.wc-help .gt-gems { --gs: calc(14 * var(--u)); gap: calc(0.5 * var(--u)); }

/* ---------------- the forge's ขัดเกรด page: the copies down the left (the refine page's list, css/refinewin.css), the
   page on the right; the slots in the piece's rarity colour, a navy pill with the gems and the grade under each ---------------- */
.cg-page.pg-grade { overflow: hidden; }
.gt3 { display: grid; grid-template-columns: calc(244 * var(--u)) minmax(0, 1fr); gap: calc(14 * var(--u)); height: 100%; min-height: 0; }
#forge .gt3 { height: calc(600 * var(--u)); }
.gt3-main { min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #74b6ec transparent; padding-right: calc(4 * var(--u)); }
.gt3-row img.g0 { background: linear-gradient(#fbf7ee, #e2d8c4); } .gt3-row img.g2 { background: linear-gradient(#eef6ff, #b1d6fa); }
.gt3-row img.g3 { background: linear-gradient(#f6eeff, #cdb0f5); } .gt3-row img.g4 { background: radial-gradient(circle at 50% 30%, #fffbe0, #ffe08a 45%, #f3b83a); }
.gt3-row .gt-gems.row { position: absolute; right: calc(9 * var(--u)); bottom: calc(7 * var(--u)); --gs: calc(15 * var(--u)); gap: calc(1 * var(--u)); }
.gt2-pill { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(14 * var(--u)); background: linear-gradient(#3d4468, #262a45); }
.gt2-pill em { font-style: normal; }
.gt2-pill .gt-gems { --gs: calc(17 * var(--u)); gap: calc(1 * var(--u)); }
.gt-legend { flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)) calc(10 * var(--u)); }
.gt-legend > b { font: 700 calc(14 * var(--u)) / 1 'Mitr', sans-serif; }
.gt-legend .gt-gems { --gs: calc(13 * var(--u)); gap: calc(0.5 * var(--u)); }
.gt-legend .gt-none { font-style: normal; color: #8a8296; }
/* an upright phone: one column, the list a row that scrolls sideways (as the refine page), the page scrolls */
html.mob-port .cg-page.pg-grade { overflow-y: auto; }
html.mob-port .gt3 { grid-template-columns: minmax(0, 1fr); height: auto; }
html.mob-port .gt3-main { overflow: visible; }
html.mob-port .gt3 .rw-row { flex: none; width: calc(240 * var(--u)); }
/* the forge's หินออฟ · เจาะออฟ list (js/forge.js): the gems at the row's right end */
.fg-copy .gt-gems.fg { margin-left: auto; flex: none; --gs: calc(15 * var(--u)); gap: calc(0.5 * var(--u)); }