/* The War Bond (Gage 10-21, js/pass.js): "big and grand ... from tier 1 to tier 100". Two passes, one per side of the
   war, in the hand-inked kit style: offset shadows, stamped labels, display type. Side themes: US navy with red and
   white stripes and stars, Canada red with white maple leaves, no side yet in black and gold. Every animation stops
   under reduced motion and Kit.calm() (the ceremony gets .calm). */

/* ---------- the War Bond crest (Kit.passMark) ---------- */
.pass-mark { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; flex: none; filter: drop-shadow(0 1px 0 #0009); }
.pass-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pass-mark .pm-wing { fill: #e2b64a; stroke: #0b0b0b; stroke-width: 1; stroke-linejoin: round; }
.pass-mark .pm-shield { fill: #1b1610; stroke: #0b0b0b; stroke-width: 2.6; stroke-linejoin: round; }
.pass-mark .pm-edge { fill: none; stroke: #f2c84b; stroke-width: 1; stroke-linejoin: round; }
.pass-mark .pm-red { fill: #c8262a; }
.pass-mark .pm-white { fill: #f4efe4; }
.pass-mark .pm-navy { fill: #1f3a7a; }
.pass-mark .pm-gold { fill: #f2c84b; }
.pass-mark .pm-banner { fill: #d9a531; stroke: #0b0b0b; stroke-width: 1; stroke-linejoin: round; }
.pass-mark .pm-dark { fill: #2a1d05; }
.pass-mark .pm-seam { fill: none; stroke: #0b0b0b; stroke-width: .7; }
.tabbar .pass-mark.tab-mark { width: 32px; height: 32px; margin: -3px 0 -1px; }

/* ---------- the Pass tab next to Home: gold, with the claimable badge ---------- */
.tabbar button.tab-pass { position: relative; color: #f2c84b; }
.tabbar button.tab-pass.on { color: #fff; }
.tab-badge { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; font: 400 14px/19px var(--display); font-style: normal; color: #fff; text-align: center;
  background: #e0242d; border: 1px solid #ffb294; box-shadow: 0 0 0 2px #0b0b0b; animation: wb-badge 1.6s ease-in-out infinite; }
.tab-badge[hidden] { display: none; }
@keyframes wb-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ---------- side themes ---------- */
.wb-us { --wa: #24427f; --wa2: #101f45; --wb: #b22234; --wc: #f2eee6; --wink: #070e24; --wglow: #7aa2ff; }
.wb-ca { --wa: #b3241c; --wa2: #4c0c0c; --wb: #f4efe4; --wc: #f4efe4; --wink: #240505; --wglow: #ff8a76; }
.wb-nn { --wa: #4a3a24; --wa2: #17130f; --wb: #d9a531; --wc: #f2eee6; --wink: #0d0b09; --wglow: #ffd36e; }
.wb-motif { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }
.wb-us .wb-motif { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' fill-opacity='.11' d='M10.0 5.0L11.2 8.3L14.8 8.5L12.0 10.6L12.9 14.0L10.0 12.1L7.1 14.0L8.0 10.6L5.2 8.5L8.8 8.3ZM34.0 29.0L35.2 32.3L38.8 32.5L36.0 34.6L36.9 38.0L34.0 36.1L31.1 38.0L32.0 34.6L29.2 32.5L32.8 32.3Z'/%3E%3C/svg%3E") 0 0 / 46px 46px,
  repeating-linear-gradient(-24deg, transparent 0 34px, #b2223430 34px 52px, transparent 52px 60px, #f2eee612 60px 70px); }
.wb-ca .wb-motif { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' fill-opacity='.09' transform='scale(.8)' d='M10.87 1.31L12.97 5.36L15.24 4.22L14.43 9.41L17.83 6.17L18.8 8.27L22.04 7.63L20.91 11.03L22.69 12L17.51 16.05L18.16 17.99L12.81 17.18L13.13 22.69L10.87 22.69L11.19 17.18L5.84 17.99L6.49 16.05L1.31 12L3.09 11.03L1.96 7.63L5.2 8.27L6.17 6.17L9.57 9.41L8.76 4.22L11.03 5.36Z'/%3E%3Cpath fill='%23fff' fill-opacity='.06' transform='translate(26 26) scale(.7) rotate(14 12 12)' d='M10.87 1.31L12.97 5.36L15.24 4.22L14.43 9.41L17.83 6.17L18.8 8.27L22.04 7.63L20.91 11.03L22.69 12L17.51 16.05L18.16 17.99L12.81 17.18L13.13 22.69L10.87 22.69L11.19 17.18L5.84 17.99L6.49 16.05L1.31 12L3.09 11.03L1.96 7.63L5.2 8.27L6.17 6.17L9.57 9.41L8.76 4.22L11.03 5.36Z'/%3E%3C/svg%3E") 0 0 / 58px 58px,
  linear-gradient(90deg, #f4efe40d 0 14%, transparent 14% 86%, #f4efe40d 86%); }
.wb-nn .wb-motif { background: repeating-linear-gradient(-30deg, transparent 0 22px, #d9a53114 22px 26px); }

/* ---------- the header ---------- */
.wb { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wb-head { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px;
  background: radial-gradient(ellipse at 22% 0%, color-mix(in srgb, var(--wglow) 26%, transparent), transparent 55%), linear-gradient(165deg, var(--wa), var(--wa2) 62%, #0b0b0b);
  border: 1px solid color-mix(in srgb, var(--wglow) 45%, #5a4b39); box-shadow: 0 4px #070807, inset 0 1px #ffffff1f; }
.wb-head::after { content: ''; position: absolute; inset: 4px; z-index: -1; border: 1px dashed #ffffff1c; pointer-events: none; }
.wb-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pass-mark.wb-crest { width: 58px; height: 58px; filter: drop-shadow(0 3px 0 #000a) drop-shadow(0 0 14px color-mix(in srgb, var(--wglow) 45%, transparent)); animation: wb-float 4s ease-in-out infinite; }
@keyframes wb-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
.wb-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wb-title em { font: 400 12px var(--display); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #f2c84b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-title h2 { margin: 0; font: 400 31px/.86 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 2px 3px var(--wink), 0 0 18px color-mix(in srgb, var(--wglow) 40%, transparent); text-wrap: balance; }
.wb-title small { font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #e7dcc8; }
.wb-title small b { color: #fff; font-variant-numeric: tabular-nums; }
.wb-tierstamp { display: flex; flex-direction: column; align-items: center; padding: 4px 8px 3px; transform: rotate(-4deg); color: #ffe08a; background: #0b0b0bb8;
  border: 2px solid #f2c84b; box-shadow: 2px 3px 0 #000a, inset 0 0 0 2px #0b0b0b; font-family: var(--display); text-transform: uppercase; }
.wb-tierstamp small { font-size: 11px; letter-spacing: .14em; line-height: 1; color: #e7cf91; }
.wb-tierstamp b { font: 400 40px/.9 var(--display); color: #fff; text-shadow: 2px 2px #6a4b0d; font-variant-numeric: tabular-nums; }

/* the hero you're working toward, turning in 3D */
.wb-show { position: relative; height: 128px; margin: 0 -12px; overflow: hidden; border-top: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14;
  background: radial-gradient(ellipse at 60% 62%, color-mix(in srgb, var(--wglow) 30%, transparent), transparent 62%), linear-gradient(180deg, #0000, #0006); }
.wb-show.gold { background: radial-gradient(ellipse at 60% 60%, #ffd36e66, transparent 60%), linear-gradient(180deg, #3a2a0a55, #0007); }
.wb-show canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wb-show .wb-tierstamp { position: absolute; z-index: 1; top: 8px; right: 12px; }
.wb-show-glow { position: absolute; left: 56%; top: 54%; width: 300px; height: 300px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wglow) 16%, transparent) 0 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: wb-spin 40s linear infinite; }
.wb-show.gold .wb-show-glow { background: repeating-conic-gradient(from 0deg, #ffd36e33 0 7deg, transparent 7deg 18deg); }
@keyframes wb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.wb-show-cap { position: absolute; left: 12px; bottom: 9px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 64%; pointer-events: none; }
.wb-show-cap em { padding: 2px 7px; font: 400 12px var(--display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #2a1d05; background: linear-gradient(#ffe08a, #d9a531); box-shadow: 1px 2px #000a; transform: rotate(-2deg); }
.wb-show-cap b { font: 400 26px/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 2px 2px #000, 0 0 12px #000; }
.wb-show-cap small { font: 400 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #e7dcc8; text-shadow: 1px 1px #000; }

.wb-xp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 2px; font: 400 18px var(--display); color: #fff; }
.wb-xp .bar { height: 14px; background: #0b0b0b; border: 1px solid #f2c84b88; box-shadow: inset 0 1px 3px #000; overflow: hidden; }
.wb-xp .bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, #ffffff26 0 6px, transparent 6px 12px), linear-gradient(90deg, #b07812, #ffe08a); box-shadow: 0 0 12px #f2c84b88; animation: wb-march 1.2s linear infinite; background-size: 17px 17px, 100% 100%; }
@keyframes wb-march { to { background-position: 17px 0, 0 0; } }
.wb-xp small { grid-column: 1 / -1; text-align: center; font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #e7dcc8; }
/* Daily orders (Gage 10-21 pacing): three a UTC day, one compact strip. */
.wb-daily { padding: 5px 8px 6px; background: #0b0b0bcc; border: 1px solid #f2c84b55; box-shadow: 2px 2px 0 #000; }
.wb-daily-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 400 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #ffe08a; }
.wb-daily-h small { font-size: 11px; color: #b8ad99; letter-spacing: .05em; }
.wb-daily ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.wb-daily li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wb-daily li span { display: flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1.15; color: #f2eee6; overflow: hidden; text-overflow: ellipsis; }
.wb-daily li span .wi { flex: none; width: 13px; height: 13px; }
.wb-daily li i { display: block; height: 5px; background: #262420; } .wb-daily li i b { display: block; height: 100%; background: linear-gradient(90deg, #b07812, #ffe08a); }
.wb-daily li small { font: 400 11px var(--display); letter-spacing: .05em; color: #b8ad99; text-transform: uppercase; }
.wb-daily li.done span, .wb-daily li.done small { color: #8fe08a; } .wb-daily li.done i b { background: #6fbf4f; }
.wb-chips { display: flex; align-items: flex-start; align-self: start; gap: 6px; margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.wb-chips::-webkit-scrollbar { display: none; }
.wb-chip { flex: none; min-width: max-content; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font: 400 13px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #e7dcc8;
  background: #0b0b0b99; border: 1px solid #ffffff2e; box-shadow: 1px 2px 0 #0008; }
.wb-chip .wi { width: 16px; height: 16px; }
.wb-chip.on { color: #ffe08a; border-color: #f2c84b; }
.wb-chip.off { color: #a49a8e; }
.wb-chip.wb-rally { color: #fff; background: #8a1c1fcc; border-color: #ff8b78; animation: wb-rally 1.8s ease-in-out infinite; }
@keyframes wb-rally { 0%, 100% { box-shadow: 1px 2px 0 #0008; } 50% { box-shadow: 1px 2px 0 #0008, 0 0 14px #ff4c3c88; } }
.wb-chip.lead { color: #d7f7a8; border-color: #86c23a; }
.wb-chip.win { color: #2a1d05; background: linear-gradient(#ffe08a, #d9a531); border-color: #fff1b8; }

/* CLAIM ALL: the biggest thing on the screen when there's something to claim */
.wb-claim { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 6px 12px 6px 18px;
  font: 400 32px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #2a1d05; text-align: left;
  background: linear-gradient(170deg, #fff0bd, #f2c14e 42%, #c98a1c); border: 2px solid #fff1b8; box-shadow: 0 5px #6a4b0d, 0 0 0 3px #0b0b0b, 0 0 28px #ffd36e88; animation: wb-claim 1.6s ease-in-out infinite; }
.wb-claim > span { text-shadow: 1px 1px #fff8; }
.wb-claim b { display: grid; place-items: center; min-width: 50px; height: 50px; padding: 0 8px; font: 400 32px/1 var(--display); color: #ffe08a; background: #120c08; border: 2px solid #6a4b0d; box-shadow: inset 0 0 0 2px #2a1d05; transform: rotate(-4deg); }
.wb-claim small { max-width: 64px; font: 400 13px/1.05 var(--display); letter-spacing: .08em; color: #4a3308; }
.wb-claim::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #ffffffa8, transparent); animation: wb-shine 2.6s ease-in-out infinite; pointer-events: none; }
.wb-claim:active { transform: translateY(3px); box-shadow: 0 2px #6a4b0d, 0 0 0 3px #0b0b0b; }
@keyframes wb-claim { 0%, 100% { box-shadow: 0 5px #6a4b0d, 0 0 0 3px #0b0b0b, 0 0 16px #ffd36e55; } 50% { box-shadow: 0 5px #6a4b0d, 0 0 0 3px #0b0b0b, 0 0 34px #ffd36ecc; } }
@keyframes wb-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.wb-claim.enlist { font-size: 27px; color: #fff; background: linear-gradient(170deg, #ff6a55, #d32a2c 45%, #8a141a); border-color: #ffb294; box-shadow: 0 5px #4a0b0e, 0 0 0 3px #0b0b0b, 0 0 24px #ff4c3c88; animation: none; }
.wb-claim.enlist > span { text-shadow: 2px 2px #5d1417; }
.wb-claim.enlist b { color: #fff; background: #3a0a0c; border-color: #ffb294; }
.wb-claim.enlist small { color: #ffd9cf; }
.wb-claim.idle { grid-template-columns: auto minmax(0, 1fr); min-height: 52px; font-size: 22px; color: #e7dcc8; background: #0b0b0b99; border: 1px solid #ffffff2e; box-shadow: 0 3px #070807; animation: none; }
.wb-claim.idle::after { display: none; }
.wb-claim.idle small { max-width: none; text-align: right; color: #ffe08a; font-size: 15px; }

/* before you've picked a side: both passes side by side */
.wb-covers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb-cover { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 8px 26px; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--wglow) 30%, transparent), transparent 60%), linear-gradient(165deg, var(--wa), var(--wa2) 70%, #0b0b0b);
  border: 1px solid #ffffff33; box-shadow: 0 3px #070807; transition: transform .14s, box-shadow .2s; }
.wb-cover.on { border-color: #f2c84b; box-shadow: 0 3px #070807, 0 0 0 2px #f2c84b, 0 0 20px #f2c84b55; }
.wb-cover .pass-mark { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 #000a); }
.wb-cover > b { font: 400 20px/.95 var(--display); letter-spacing: .04em; text-transform: uppercase; text-shadow: 2px 2px var(--wink); }
.wb-cover > span { display: flex; flex-direction: column; gap: 1px; }
.wb-cover small { font: 400 11px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #e7dcc8; }
.wb-cover small.g { color: #ffe08a; }
.wb-cover em { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; font: 400 12px var(--display); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #a49a8e; background: #0b0b0bb0; }
.wb-cover.on em { color: #2a1d05; background: linear-gradient(#ffe08a, #d9a531); }
.wb-note { margin: 0; font-size: 13px; line-height: 1.35; color: #e7dcc8; }
.wb-previewing { margin: 0; text-align: center; font: 400 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #a49a8e; }
.wb-previewing b { color: #ffe08a; font-weight: 400; }
.war-pick.wb-pulse { animation: wb-pick 1.1s ease-out 3; }
@keyframes wb-pick { 0% { box-shadow: 0 0 0 0 #f2c84bcc; } 100% { box-shadow: 0 0 0 16px #f2c84b00; } }

/* ---------- jump to a hero ---------- */
.wb-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wb-jump::-webkit-scrollbar { display: none; }
.wb-jump button { flex: none; min-width: 44px; height: 32px; padding: 0 10px; font: 400 17px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #e7dcc8;
  background: linear-gradient(170deg, #2b2620, #121110); border: 1px solid #8a72546e; box-shadow: 0 2px #050605; }
.wb-jump button.now { color: #fff; background: linear-gradient(150deg, #c42b30, #7a1a20); border-color: #ff8b78; }
.wb-jump button.done { color: #ffe08a; border-color: #d9a53188; }
.wb-jump button.g { color: #2a1d05; background: linear-gradient(170deg, #ffe08a, #c98a1c); border-color: #fff1b8; }
.wb-jump button:active { transform: translateY(1px); box-shadow: 0 1px #050605; }

/* ---------- the track: 100 tiers, premium above, free below, the rail between ---------- */
.wb-track { --rowP: 164px; --rowF: 118px; --node: 52px; --colW: 120px; --heroW: 214px;
  position: relative; margin: 0 -16px; padding: 12px 16px 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--wa) 30%, transparent), transparent 70%), linear-gradient(180deg, #14110e, #0b0b0b);
  border-top: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14; box-shadow: inset 0 10px 18px -12px #000; }
.wb-track::-webkit-scrollbar { display: none; }
.wb-track.dragging { cursor: grabbing; }
.wb-track.dragging .wb-card { pointer-events: none; }
.wb-lanes { position: relative; display: flex; gap: 10px; width: max-content; padding-right: 30px; }
.wb-tags { position: sticky; left: -16px; z-index: 5; display: grid; grid-template-rows: var(--rowP) var(--node) var(--rowF); width: 22px; margin: 0 -2px 0 -16px; }
.wb-tags span { display: flex; align-items: center; justify-content: center; gap: 6px; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 13px var(--display); letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 10px #000; }
.wb-tags .tg-prem { color: #2a1d05; background: linear-gradient(90deg, #c98a1c, #ffe08a); }
.wb-tags .tg-prem .pass-mark { width: 16px; height: 16px; transform: rotate(90deg); }
.wb-tags .tg-free { grid-row: 3; color: #e7dcc8; background: linear-gradient(90deg, #2b2620, #4a4136); }
.wb-col { position: relative; z-index: 1; flex: none; display: grid; grid-template-rows: var(--rowP) var(--node) var(--rowF); width: var(--colW); }
.wb-col.hero { width: var(--heroW); }

/* the rail and the tier numbers stamped on it */
.wb-rail { position: absolute; z-index: 0; top: calc(var(--rowP) + var(--node) / 2 - 6px); height: 12px; background: #0b0b0b; border: 1px solid #5a4b39; box-shadow: 0 2px #000; }
.wb-fill { display: block; height: 100%; max-width: 100%; background: repeating-linear-gradient(-45deg, #ffffff30 0 6px, transparent 6px 12px), linear-gradient(90deg, #8a5a12, #f2c14e 70%, #fff0bd);
  background-size: 17px 17px, 100% 100%; box-shadow: 0 0 14px #f2c84baa; animation: wb-march 1.2s linear infinite; }
.wb-node { position: relative; z-index: 2; display: grid; place-items: center; }
.wb-node b { display: grid; place-items: center; width: 40px; height: 40px; font: 400 23px/1 var(--display); color: #a49a8e; background: #171512; border: 2px solid #5a4b39;
  box-shadow: 0 0 0 3px #0b0b0b, 1px 3px 0 3px #000; transform: rotate(45deg); font-variant-numeric: tabular-nums; }
.wb-node b > span { display: block; transform: rotate(-45deg); }
.wb-col.reach .wb-node b { color: #2a1d05; background: linear-gradient(135deg, #fff0bd, #d9a531); border-color: #fff1b8; }
.wb-col.hero .wb-node b { width: 48px; height: 48px; font-size: 27px; border-color: #f2c84b; }
.wb-col.open .wb-node b { animation: wb-node 1.2s ease-in-out infinite; }
@keyframes wb-node { 0%, 100% { box-shadow: 0 0 0 3px #0b0b0b, 1px 3px 0 3px #000; } 50% { box-shadow: 0 0 0 3px #0b0b0b, 0 0 18px 6px #ffd36eaa; } }
.wb-you { position: absolute; z-index: 4; top: calc(var(--rowP) + var(--node) / 2); width: 0; height: 0; pointer-events: none; }
.wb-you::before { content: ''; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #e0242d; border: 2px solid #fff; box-shadow: 0 0 0 2px #0b0b0b, 0 0 14px #ff4c3c; animation: wb-you 1.4s ease-in-out infinite; }
.wb-you b { position: absolute; left: 0; bottom: 11px; transform: translateX(-50%); padding: 1px 6px; font: 400 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #e0242d; box-shadow: 1px 2px #000; white-space: nowrap; }
@keyframes wb-you { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- the reward cards ---------- */
.wb-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 0; color: var(--fg); text-align: left;
  background: linear-gradient(170deg, #2a2520, #141210 78%); border: 1px solid #7d6a5266; box-shadow: 0 3px #070807, inset 0 1px #f2d9a91a; transition: transform .14s, box-shadow .2s; }
.wb-card.prem { margin-bottom: 4px; background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--wglow) 24%, transparent), transparent 66%), linear-gradient(170deg, color-mix(in srgb, var(--wa) 62%, #1a1410), #100e0c 82%); border-color: #d9a53199; }
.wb-card.free { margin-top: 4px; }
.wb-card:active { transform: translateY(2px) scale(.985); box-shadow: 0 1px #070807; }
.wb-art { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.wb-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wb-art .wb-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.wb-art .art { width: 60px; height: 60px; filter: drop-shadow(0 3px 0 #000a); }
.wb-card.prem .wb-art .art { width: 70px; height: 70px; }
.wb-art .art img { width: 100%; height: 100%; }
.wb-art > .wi { width: 46px; height: 46px; opacity: .8; }
.wb-plus { position: absolute; right: 6px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 2px; font: 400 15px var(--display); font-style: normal; color: #9fe8f2; background: #0b0b0bcc; }
.wb-plus .art { width: 18px !important; height: 18px !important; }
.wb-name { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 5px 7px 6px; background: #0b0b0bc4; border-top: 1px solid #ffffff14; }
.wb-name b { display: block; font: 400 15px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-name small { font: 400 10px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #a49a8e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-card.gear .wb-name small { color: #ffe08a; }

/* heroes: wide, framed in gold, a ribbon, the gear big */
.wb-card.hero.prem { border: 2px solid #f2c84b; box-shadow: 0 3px #070807, 0 0 0 2px #0b0b0b, 0 0 26px #f2c84b55; }
.wb-card.hero.prem .wb-name b { font-size: 21px; }
.wb-card.hero.prem .wb-name small { font-size: 12px; }
.wb-card.hero.free .wb-art .art { width: 78px; height: 78px; }
.wb-ribbon { position: absolute; z-index: 3; top: 7px; left: -1px; padding: 2px 14px 2px 7px; font: 400 12px/1.1 var(--display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #2a1d05;
  background: linear-gradient(#ffe08a, #d9a531); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); filter: drop-shadow(1px 2px 0 #000a); }
.wb-card.gold { background: radial-gradient(ellipse at 50% 42%, #ffe08a66, transparent 62%), linear-gradient(160deg, #7a5612, #2a1d05 72%); border-color: #ffe08a; box-shadow: 0 3px #070807, 0 0 0 2px #0b0b0b, 0 0 34px #ffd36e88; }
.wb-card.gold::after, .wbc-card.gold .wbc-face::after { content: ''; position: absolute; top: -30%; bottom: -30%; width: 35%; left: -60%; z-index: 2; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff6d4aa, transparent); animation: wb-shine 3.4s ease-in-out infinite; }
.wb-card.gold .wb-name b { color: #ffe08a; text-shadow: 1px 1px #6a4b0d; }
/* the golden tank is cast in gold: the real model, tinted like a trophy */
.wb-card.gold .wb-art canvas, .wb-show.gold canvas, .wbc-card.gold .wbc-art canvas, .wb-inspect.gold .preview { filter: sepia(1) saturate(2.4) hue-rotate(-6deg) brightness(1.18) contrast(1.1) drop-shadow(0 0 10px #ffd36e66); }

/* state: ready to claim, owned, locked (premium), ahead */
.wb-card.ready { border-color: #ffd36e; box-shadow: 0 3px #070807, 0 0 0 2px #ffd36e, 0 0 22px #ffd36e99; animation: wb-ready 1.4s ease-in-out infinite; }
@keyframes wb-ready { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.wb-stamp { position: absolute; z-index: 4; top: 30px; right: 4px; padding: 3px 7px 2px; font: 400 17px/1 var(--display); font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid currentColor; box-shadow: 1px 2px 0 #000a; pointer-events: none; }
.wb-stamp.claim { color: #120c08; background: #ffd36e; border-color: #fff1b8; transform: rotate(9deg); }
.wb-stamp.owned { top: auto; bottom: 46px; right: 8px; color: #a8e05a; background: #0b0b0bc8; transform: rotate(-11deg); outline: 1px solid #a8e05a66; outline-offset: 2px; }
.wb-card.got .wb-art { filter: saturate(.85) brightness(.9); }
.wb-card.locked .wb-art { filter: saturate(.85) brightness(.96); }
.wb-card.locked .wb-name b { color: #d8cfbf; }
.wb-lock { position: absolute; z-index: 4; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; background: #0b0b0bd0; border: 1px solid #f2c84b99; border-radius: 50%; box-shadow: 1px 2px #000a; }
.wb-lock .pass-mark { width: 24px; height: 24px; }
.wb-card.hero .wb-lock { top: 8px; }
.wb-card.ahead .wb-name small { color: #8f8a84; }
.wb-card.ahead.gear .wb-name small { color: #d9b86a; }

/* the premium track, for sale */
.wb-prem { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: linear-gradient(165deg, #2b2412, #120f0b 70%); border: 2px solid #d9a531; box-shadow: 0 4px #070807, 0 0 22px #d9a53133; }
.wb-prem h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 24px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ffe08a; }
.wb-prem h3 .pass-mark { width: 34px; height: 34px; }
.wb-prem ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 3px; color: #e7dcc8; font-size: 14px; }
.wb-prem ul b { color: #fff; }
.wb-prem > small { color: #a49a8e; }
.wb-buy { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wb-buy .pass-mark { width: 26px; height: 26px; }

/* the pass in a sheet (finish screen, Supply, film options) */
.sheet-box.wb-sheet { max-width: 560px; padding: 10px 10px 12px; gap: 10px; }
.wb-sheet .wb-track { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.wb-sheet .wb-tags { left: -10px; margin-left: -10px; }
.wb-sheet .wb-show { height: 128px; }

/* a closer look */
.wb-inspect { border-top: 4px solid var(--wglow); }
.wb-inspect .rar { display: flex; align-items: center; gap: 6px; font: 400 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #ffe08a; }
.wb-inspect .rar .pass-mark { width: 24px; height: 24px; }
.wb-inspect.gold h2 { color: #ffe08a; }
.wb-inspect .preview { height: 190px; background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--wglow) 26%, transparent), transparent 66%), #0e0d0b; }
.wb-line { color: #fff !important; font: 400 17px var(--display) !important; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- the claim ceremony ---------- */
.wb-cere { position: fixed; inset: 0; z-index: 40; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; justify-items: center; align-items: center; gap: 10px;
  padding: calc(var(--safe-t) + 14px) 12px calc(var(--safe-b) + 14px); overflow: hidden; background: #050505; opacity: 0; transition: opacity .25s; touch-action: none; }
.wb-cere.in { opacity: 1; }
.wb-cere.out { opacity: 0; transition: opacity .25s; }
.wbc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--wa) 70%, transparent), transparent 70%); }
.wbc-rays { position: absolute; left: 50%; top: 42%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wglow) 20%, transparent) 0 6deg, transparent 6deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 32%); mask: radial-gradient(circle, #000 4%, transparent 32%); animation: wb-spin 50s linear infinite; }
.wbc-bg .wb-motif { opacity: .55; }
.wbc-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transform: scale(2.2); opacity: 0; }
.wb-cere.in .wbc-head { transform: none; opacity: 1; transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .2s; }
.pass-mark.wbc-crest { width: 92px; height: 92px; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 24px color-mix(in srgb, var(--wglow) 60%, transparent)); }
.wbc-head em { font: 400 15px var(--display); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #ffe08a; }
.wbc-head h2 { margin: 0; font: 400 46px/.9 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 3px 4px var(--wink), 0 0 26px color-mix(in srgb, var(--wglow) 55%, transparent); }
.wbc-cards { --cw: 108px; --ch: 147px; --cols: 3; align-self: stretch; justify-self: stretch; display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); grid-auto-rows: var(--ch); gap: 8px; justify-content: center; align-content: center; min-height: 0; perspective: 1000px; }
.wbc-card { position: relative; width: var(--cw); height: var(--ch); opacity: 0; transform: translateY(80px) scale(.5) rotate(-8deg); transition: transform .42s cubic-bezier(.2, 1.4, .4, 1) calc(var(--i) * 55ms), opacity .25s calc(var(--i) * 55ms); }
.wb-cere.dealt .wbc-card { opacity: 1; transform: none; }
.wbc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.35, .5, 1); }
.wbc-card.flip .wbc-in { transform: rotateY(180deg); }
.wbc-back, .wbc-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid #d9a531; box-shadow: 0 4px #000, 0 0 0 2px #0b0b0b; }
.wbc-back { background: repeating-linear-gradient(-30deg, transparent 0 10px, #ffffff0d 10px 14px), linear-gradient(160deg, var(--wa), var(--wa2)); }
.wbc-back .pass-mark { width: 60%; height: 60%; }
.wbc-face { transform: rotateY(180deg); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--wglow) 30%, transparent), transparent 66%), linear-gradient(170deg, #2a2520, #121110); }
.wbc-art { position: relative; flex: 1; width: 100%; display: grid; place-items: center; }
.wbc-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wbc-art .art { width: calc(var(--cw) * .56); height: calc(var(--cw) * .56); }
.wbc-art > .pass-mark { width: calc(var(--cw) * .5); height: calc(var(--cw) * .5); }
.wbc-face b { width: 100%; padding: 4px 5px 1px; font: 400 clamp(11px, calc(var(--cw) * .14), 19px)/1 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: .03em; text-transform: uppercase; text-align: center; color: #fff; background: #0b0b0bcc; }
.wbc-face small { width: 100%; padding: 1px 5px 5px; font: 400 clamp(9px, calc(var(--cw) * .095), 12px) var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #ffe08a; background: #0b0b0bcc; }
.wbc-card.hero::before, .wbc-card.gold::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, #ffd36e66, transparent 70%); opacity: 0; transition: opacity .4s; }
.wbc-card.hero.flip::before, .wbc-card.gold.flip::before { opacity: 1; }
.wbc-card.hero .wbc-face { border-color: #ffe08a; box-shadow: 0 4px #000, 0 0 0 2px #0b0b0b, 0 0 30px #ffd36e88; }
.wbc-card.gold .wbc-face { background: radial-gradient(ellipse at 50% 40%, #ffe08a88, transparent 62%), linear-gradient(160deg, #7a5612, #2a1d05 72%); border-color: #fff1b8; }
.wbc-card.slam .wbc-in { animation: wb-slam .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes wb-slam { 0% { transform: rotateY(180deg) scale(1.5); } 60% { transform: rotateY(180deg) scale(.94); } 100% { transform: rotateY(180deg) scale(1); } }
.wbc-tot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.wb-cere.done .wbc-tot { opacity: 1; transform: none; }
.wbc-tot span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; background: #0b0b0bcc; border: 1px solid #d9a53199; box-shadow: 0 3px #000; }
.wbc-tot .art, .wbc-tot .pass-mark { width: 28px; height: 28px; }
.wbc-tot b { font: 400 28px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.wbc-go { display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.wb-cere.ready .wbc-go { opacity: 1; pointer-events: auto; }
.wbc-go .btn { min-width: 150px; font-size: 22px; }
.wbc-skip { font: 400 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #8f8a84; }
.wb-cere.ready .wbc-skip { visibility: hidden; }
.wb-cere.calm, .wb-cere.calm * { transition: none !important; animation: none !important; }

/* ---------- desktop: a wide pass, the hero beside the header ---------- */
body.pc-wide #tab-pass.page { max-width: 1320px; }
body.pc-wide .wb-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "top show" "xp show" "chips show" "claim show" "cov cov" "note note"; align-content: center; column-gap: 26px; row-gap: 10px; padding: 14px 20px; }
body.pc-wide .wb-top { grid-area: top; }
body.pc-wide .wb-show { grid-area: show; height: auto; min-height: 214px; margin: -14px -20px -14px 0; border: 0; border-left: 1px solid #ffffff14; }
body.pc-wide .wb-xp { grid-area: xp; }
body.pc-wide .wb-chips { grid-area: chips; }
body.pc-wide .wb-claim { grid-area: claim; }
body.pc-wide .wb-covers { grid-area: cov; }
body.pc-wide .wb-note { grid-area: note; }
body.pc-wide .wb-head:has(.wb-covers) { grid-template-areas: "top top" "cov cov" "note note" "xp claim"; }
body.pc-wide .wb-title h2 { font-size: 46px; }
body.pc-wide .pass-mark.wb-crest { width: 84px; height: 84px; }
body.pc-wide .wb-track { --rowP: 196px; --rowF: 138px; --colW: 146px; --heroW: 272px; margin: 0; }
body.pc-wide .wb-tags { left: -16px; }
body.pc-wide .wb-name b { font-size: 17px; }
body.pc-wide .wb-card.hero.prem .wb-name b { font-size: 25px; }
body.pc-wide .wb-art .art { width: 72px; height: 72px; }
body.pc-wide .wb-card.prem .wb-art .art { width: 86px; height: 86px; }
body.pc-wide .wb-covers .wb-cover { min-height: 240px; }
body.pc-wide .sheet-box.wb-sheet { max-width: 1100px; }

@media (prefers-reduced-motion: reduce) {
  .tab-badge, .pass-mark.wb-crest, .wb-show-glow, .wb-xp .bar i, .wb-chip.wb-rally, .wb-claim, .wb-claim::after, .wb-fill, .wb-col.open .wb-node b, .wb-you::before,
  .wb-card.ready, .wb-card.gold::after, .wbc-rays, .war-pick.wb-pulse, .wbc-card.gold .wbc-face::after { animation: none !important; }
}