/* Pre-Registration Rewards, shared by Home and the Close Beta page (markup: static/js/prereg-rewards.js).
   Five milestones on one rail; the last one is a rare headgear shown big. Needs tbf.css (tokens, the cell and diamond sprites) loaded first.
   Layout: all five tiers in one row on one unbroken rail, the rare one last and wider; under 1024 px a vertical timeline (rail on the left, one tier per row). */

.cb-rewards {
  --rw-sans: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --rw-serif: "Merriweather", "Noto Sans Thai", Georgia, serif;
  --rw-num: "Chakra Petch", "Noto Sans Thai", sans-serif;
  background: var(--black, #07080B); padding: 14px 0 34px; font-family: var(--rw-sans); line-height: 1.6;
}
.cb-rw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.cb-rw-top h2 { font: 700 24px/1.5 var(--rw-serif); color: var(--cream); }
.cb-promise { margin: 0 0 12px; font: 500 15px/1.5 var(--rw-sans); color: var(--cream); }
.cb-count { font: 600 15px/1.5 var(--rw-sans); color: var(--dim); white-space: nowrap; }
.cb-count b { margin: 0 6px; font: 600 28px/1.2 var(--rw-num); color: var(--cream); }
.cb-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #E9C46A; color: var(--ink, #3A3226); font: 600 12px/1.6 var(--rw-sans); vertical-align: middle; }

/* the cards, and above each one its piece of the rail: the line, its fill and the diamond. The five tiers sit in ONE row on a desktop, so the
   pieces join into one unbroken rail (each piece reaches across the gap into the next card); under 1024 px the rail turns into a vertical timeline. */
.cb-cards { --gap: 14px; --node: 42px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.18fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.cb-card { display: grid; grid-template-rows: 56px 1fr; min-width: 0; }
.cb-card .rl { position: relative; height: 56px; }
.cb-card .rl .bar, .cb-card .rl .fill { position: absolute; top: 26px; height: 4px; border-radius: 2px; }
.cb-card .rl .bar { left: 0; right: calc(-1 * var(--gap)); background: #2A2D38; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .5); }
.cb-card:first-child .rl .bar { left: 0; border-radius: 2px 0 0 2px; }
.cb-card:last-child .rl .bar { right: 50%; }                                   /* the rail ends on the last diamond */
.cb-card .rl .fill { background: linear-gradient(90deg, #8E7F4C, var(--cta)); box-shadow: 0 0 8px rgba(226, 196, 120, .35); }
.cb-card .rl .fill.l { left: 0; width: calc(50% * var(--fl, 0)); }
.cb-card .rl .fill.r { left: 50%; width: calc((50% + var(--gap)) * var(--fr, 0)); }
/* the front of the fill: a bright diamond on the line and the count under it */
.cb-card .rl .fill.cur::after { content: ""; position: absolute; right: -7px; top: -5px; z-index: 3; width: 14px; height: 14px; box-sizing: border-box; transform: rotate(45deg); background: #FFF1B8; border: 2px solid var(--cta); box-shadow: 0 0 10px 3px rgba(255, 226, 140, .55); animation: rwpulse 2.4s ease-in-out infinite; }
.cb-card .rl .fill.cur::before { content: attr(data-n); position: absolute; right: 0; top: 16px; z-index: 3; transform: translateX(50%); padding: 0 8px; border-radius: 999px; background: var(--cta); color: var(--ink, #3A3226); font: 700 12px/18px var(--rw-num); white-space: nowrap; }
.cb-card .rl .fill.near0.cur::before { right: auto; left: -7px; transform: none; }       /* at the very start: the pill opens to the right of the marker */
.cb-card .rl .nd { position: absolute; left: 50%; top: 7px; z-index: 2; width: var(--node); height: var(--node); margin-left: calc(var(--node) / -2); background: url(../ui/tab_diamond_idle.png) center / var(--node) no-repeat; image-rendering: pixelated; }
.cb-card.reached .rl .nd { background-image: url(../ui/tab_diamond_on.png); filter: drop-shadow(0 0 6px rgba(255, 226, 140, .6)); }   /* the diamond lights when the count has got there (the Unlocked chip follows the unlock flags) */
.cb-card.grand .rl .nd { --node: 50px; top: 3px; }
@keyframes rwpulse { 0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 226, 140, .45); } 50% { box-shadow: 0 0 14px 5px rgba(255, 226, 140, .7); } }

/* a tier's panel: the milestone on top, its rewards as a list, the Unlocked chip at the foot (the chips line up across the row) */
.cb-card .pn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 14px; text-align: center; border-radius: 8px;
  background: linear-gradient(180deg, #1C2126 0, #0E1216 140px, #0B0E11 100%); border: 1px solid #1F242B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); transition: border-color .2s, transform .2s; }
.cb-card .pn::before { content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 204, 152, .45), transparent); }
.cb-card.ok .pn { border-color: #5C4E2A; }
.cb-card .at { font: 600 22px/1.25 var(--rw-num); color: var(--dim); }
.cb-card.ok .at { color: var(--goldHi); }
.cb-card .unit { font: 400 13px/1.5 var(--rw-sans); color: var(--dim); }
.cb-card .give { display: grid; gap: 4px; width: 100%; margin: 12px 0 14px; padding: 12px 0 0; border-top: 1px solid rgba(216, 204, 152, .1); list-style: none; }
.cb-card .give li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 40px; padding: 2px 8px 2px 2px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(216, 204, 152, .07), rgba(216, 204, 152, .015)); }
.cb-card .give .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 5px; background: radial-gradient(circle, #3A3322 0, #1C1A14 75%);
  border: 1px solid #6E5D2E; box-shadow: inset 0 0 6px rgba(255, 226, 140, .12); }
.cb-card .give .ic img { width: 32px; height: 32px; max-width: none; image-rendering: pixelated; }   /* lift the site's global img max-width clamp */
.cb-card .give .nm { margin: 0; text-align: left; font: 600 12.5px/1.3 var(--rw-sans); color: var(--cream); }
.cb-card .give .qty { font: 600 14px/1 var(--rw-num); color: var(--goldHi); white-space: nowrap; }
.cb-card .nm { margin-top: 2px; font: 700 15px/1.5 var(--rw-sans); color: var(--cream); }
.cb-card .qty { font: 600 14px/1.4 var(--rw-num); color: var(--dim); }
.cb-card .sub { font: 400 14px/1.5 var(--rw-sans); color: var(--dim); }
.cb-card .st { display: inline-block; margin-top: auto; height: 24px; padding: 0 12px; border-radius: 999px; font: 700 12.5px/24px var(--rw-sans); background: #22262F; border: 1px solid #2F3440; color: var(--dim); }
.cb-card.ok .st { background: var(--cta); border-color: var(--cta); color: var(--ink, #3A3226); }

/* the big reward: the last tier, wider, in gold; its 19 x 15 px art at a whole 7x on a slow sunburst that turns round the art's own centre */
.cb-card.grand .pn { overflow: hidden; justify-content: flex-start; padding: 18px 14px 14px; border-color: #8E7430;
  background: radial-gradient(70% 45% at 50% 52%, rgba(128, 84, 214, .28), rgba(210, 189, 137, .07) 60%, rgba(0, 0, 0, 0) 85%), linear-gradient(180deg, #2A2618 0, #12100B 100%);
  box-shadow: inset 0 0 0 1px rgba(216, 204, 152, .2), 0 0 30px rgba(210, 189, 137, .14); }
.cb-card.grand .pn::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, #F2DC9C, transparent); }
.cb-card.grand .at { margin-top: 8px; font-size: 26px; color: var(--goldHi); }
.cb-card.grand .nm { margin-top: 2px; font: 700 21px/1.3 var(--rw-serif); color: var(--cream); }
.cb-card.grand .sub { margin-bottom: 14px; color: var(--goldHi); font: 700 12px/1.6 var(--rw-sans); letter-spacing: .14em; text-transform: uppercase; }
.cb-card .rare { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 12px; border-radius: 999px; background: linear-gradient(180deg, #F2DC9C, #C9A24A); color: #3A2A0C; font: 700 12px/24px var(--rw-sans); letter-spacing: .14em; box-shadow: 0 0 16px rgba(240, 210, 120, .45); }
.cb-card .rare::before, .cb-card .rare::after { content: ""; width: 6px; height: 6px; background: #3A2A0C; transform: rotate(45deg); }
.cb-card .hat { --hw: 133px; --hh: 105px; --burst: 240px; position: relative; display: grid; place-items: center; width: 100%; height: 170px; margin: 2px 0 4px; }
.cb-card .hat::before { content: ""; position: absolute; width: var(--burst); height: var(--burst); left: 50%; top: 50%; margin: calc(var(--burst) / -2) 0 0 calc(var(--burst) / -2); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 140, .18) 0 9deg, rgba(255, 226, 140, 0) 9deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); animation: rwspin 60s linear infinite; }
.cb-card .hat::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 230, 160, .32), rgba(255, 230, 160, 0)); }
.cb-card .hat img { position: relative; z-index: 1; width: var(--hw); height: var(--hh); max-width: none; image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255, 222, 130, .55)) drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); animation: rwbob 3.4s ease-in-out infinite; }
/* four sparks in a square round the art's centre (offsets from the middle, so they never drift with the card's width) */
.cb-card .hat .sp { position: absolute; z-index: 2; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #FFF1B8; transform: translate(var(--x), var(--y)) rotate(45deg) scale(0); box-shadow: 0 0 10px 2px rgba(255, 230, 150, .8); animation: rwtwinkle 2.8s ease-in-out infinite; }
.cb-card .hat .s1 { --x: -84px; --y: -48px; }
.cb-card .hat .s2 { --x: 84px; --y: -48px; animation-delay: .7s; }
.cb-card .hat .s3 { --x: 84px; --y: 48px; animation-delay: 1.4s; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.cb-card .hat .s4 { --x: -84px; --y: 48px; animation-delay: 2.1s; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
@keyframes rwspin { to { transform: rotate(360deg); } }
@keyframes rwbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rwtwinkle { 0%, 100% { transform: translate(var(--x, 0), var(--y, 0)) rotate(45deg) scale(0); } 50% { transform: translate(var(--x, 0), var(--y, 0)) rotate(45deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .cb-card .hat::before, .cb-card .hat img, .cb-card .rl .fill.cur::after { animation: none; } .cb-card .hat .sp { animation: none; transform: translate(var(--x), var(--y)) rotate(45deg) scale(.8); } }

/* the slim strip on the Home title screen: five rewards in a line on a dark glass bar, the rare one bigger and popping out of the top */
.hrw { --rw-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --rw-num: "Chakra Petch", sans-serif;
  display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 7px 18px 7px 14px; border-radius: 14px; color: var(--cream);
  background: rgba(7, 8, 11, .66); border: 1px solid rgba(240, 235, 216, .16); box-shadow: 0 8px 24px rgba(8, 18, 40, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .15s, transform .12s; }
.hrw:hover { border-color: var(--cta); color: var(--cream); transform: translateY(-2px); }
.hrw .hn { display: grid; justify-items: center; padding-right: 14px; margin-right: 2px; border-right: 1px solid rgba(240, 235, 216, .22); line-height: 1.1; }
.hrw .hn b { font: 600 24px/1.1 var(--rw-num); color: var(--cream); }
.hrw .hn small { font: 500 11px/1.2 var(--rw-sans); color: var(--dim); white-space: nowrap; }
.hrw .hi { display: inline-flex; align-items: center; gap: 8px; }
.hrw .hi .px { width: 32px; height: 32px; max-width: none; image-rendering: pixelated; }
.hrw .stack { display: inline-flex; }
.hrw .stack .px + .px { margin-left: -16px; }   /* a tier's rewards overlap, the first on top */
.hrw .stack .px:nth-child(1) { z-index: 4; } .hrw .stack .px:nth-child(2) { z-index: 3; } .hrw .stack .px:nth-child(3) { z-index: 2; }
.hrw .stack .px { position: relative; filter: drop-shadow(1px 0 0 rgba(7, 8, 11, .8)); }
.hrw .tx { display: grid; text-align: left; line-height: 1.15; }
.hrw .tx b { font: 600 17px/1.15 var(--rw-num); color: var(--dim); }
.hrw .tx small { font: 500 11px/1.2 var(--rw-sans); color: var(--dim); white-space: nowrap; }
.hrw .hi.ok .tx b { color: var(--goldHi); }
.hrw .cn { width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: #6B6D86; opacity: .7; }
.hrw .hi.grand { position: relative; margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(216, 204, 152, .3); }
.hrw .hat { position: relative; display: grid; place-items: center; width: 70px; height: 40px; }
.hrw .hat::before { content: ""; position: absolute; width: 96px; height: 96px; left: 50%; top: 50%; margin: -48px 0 0 -48px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 140, .22) 0 9deg, rgba(255, 226, 140, 0) 9deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); animation: rwspin 40s linear infinite; }
.hrw .hat img { position: relative; width: 57px; height: 45px; max-width: none; margin-top: -14px; image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(255, 222, 130, .7)) drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: rwbob 3.4s ease-in-out infinite; }
.hrw .hat .sp { position: absolute; width: 6px; height: 6px; background: #FFF1B8; transform: rotate(45deg) scale(0); box-shadow: 0 0 8px 2px rgba(255, 230, 150, .8); animation: rwtwinkle 2.6s ease-in-out infinite; }
.hrw .hat .s1 { left: 4px; top: -6px; }
.hrw .hat .s2 { right: 2px; bottom: 2px; animation-delay: 1.1s; }
.hrw .rare { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #F2DC9C, #C9A24A); color: #3A2A0C; font: 700 10px/18px var(--rw-sans); letter-spacing: .14em; box-shadow: 0 0 12px rgba(240, 210, 120, .45); }
.hrw .hi.grand .tx b { color: var(--goldHi); }
.hrw .hi.grand .tx small { color: var(--cream); font-weight: 700; }
/* narrow screens: the count and the rare reward only (the four small ones would not fit) */
@media (max-width: 1000px) {
  .hrw .hi:not(.grand), .hrw .cn { display: none; }
  .hrw .hi.grand { margin-left: 0; padding-left: 0; border-left: 0; gap: 8px; }
  .hrw .hn { padding-right: 12px; }
}
@media (max-width: 760px) {
  .hrw { flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding: 6px 12px 6px 8px; }
  .hrw .hn { flex-basis: 100%; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 6px; padding: 0 0 4px; margin: 0; border-right: 0; border-bottom: 1px solid rgba(240, 235, 216, .18); }
  .hrw .hn b { font-size: 18px; }
  .hrw .hat img { margin-top: 0; }
  .hrw .rare { order: 3; }
}

/* under 1024 px: a vertical timeline. The rail runs down a 44 px column on the left, through every diamond, without a break;
   the top half of a tier's segment is above its diamond, the bottom half below it (the same --fl / --fr as the row). */
@media (max-width: 1023px) {
  .cb-cards { --gap: 12px; --top: 34px; grid-template-columns: minmax(0, 1fr); }
  .cb-card { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: none; column-gap: 10px; }
  .cb-card .rl { height: auto; }
  .cb-card .rl .bar, .cb-card .rl .fill { top: 0; left: 20px; width: 4px; height: auto; }
  .cb-card .rl .bar { right: auto; bottom: calc(-1 * var(--gap)); }
  .cb-card:last-child .rl .bar { right: auto; bottom: auto; height: var(--top); }
  .cb-card .rl .fill { background: linear-gradient(180deg, #8E7F4C, var(--cta)); }
  .cb-card .rl .fill.l { width: 4px; height: calc(var(--top) * var(--fl, 0)); }
  .cb-card .rl .fill.r { top: var(--top); left: 20px; width: 4px; height: calc((100% - var(--top) + var(--gap)) * var(--fr, 0)); }
  .cb-card .rl .fill.cur::after { right: auto; top: auto; left: -5px; bottom: -7px; }
  .cb-card .rl .fill.cur::before { display: none; }                         /* the heading shows the count; the pill has no room beside a vertical rail */
  .cb-card .rl .nd { left: 22px; top: calc(var(--top) - var(--node) / 2); }
  .cb-card.grand .rl .nd { top: calc(var(--top) - 25px); }
  .cb-card .pn { align-items: stretch; text-align: left; padding: 14px 14px 14px; }
  .cb-card .pn::before { left: 0; right: auto; width: 40%; background: linear-gradient(90deg, rgba(216, 204, 152, .45), transparent); }
  .cb-card .at { font-size: 21px; }
  .cb-card .st { align-self: flex-start; margin-top: 0; }
  .cb-card .give { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-card.grand .pn { align-items: center; text-align: center; }
  .cb-card.grand .pn::before { left: 10%; right: 10%; width: auto; background: linear-gradient(90deg, transparent, #F2DC9C, transparent); }
  .cb-card.grand .st { align-self: center; }
}
/* phone */
@media (max-width: 760px) {
  .cb-rewards { padding: 10px 0 30px; }
  .cb-rw-top { display: block; }
  .cb-rw-top h2 { font-size: 19px; }
  .cb-count b { font-size: 22px; }
  .cb-cards { --gap: 10px; }
  .cb-card { grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
  .cb-card .rl .bar, .cb-card .rl .fill, .cb-card .rl .fill.r { left: 14px; }
  .cb-card .rl .nd { --node: 34px; left: 16px; }
  .cb-card.grand .rl .nd { --node: 40px; top: calc(var(--top) - 20px); }
}
/* small phone: one reward per line */
@media (max-width: 560px) {
  .cb-card .give { grid-template-columns: minmax(0, 1fr); }
  .cb-card .hat { --hw: 114px; --hh: 90px; --burst: 210px; height: 150px; }
  .cb-card .hat .s1 { --x: -74px; } .cb-card .hat .s2 { --x: 74px; } .cb-card .hat .s3 { --x: 74px; } .cb-card .hat .s4 { --x: -74px; }
}