/* The home page board (the dashboard on /), ported from the owner's Claude Design board (Showdown Automat, green).
   Everything is namespaced under .bd-view / .bd-*, so no other page changes. The header is the site's own (adventure.css).
   Desktop (>= 1100 px): the 1920 x 1080 stage of the design, scaled by --bd-s (viewport width / 1920) with a CSS transform.
   Below 1100 px: the live status and latest pull lead a readable mobile/tablet layout. */

@property --bd-g1 { syntax: '<color>'; inherits: true; initial-value: #33549a; }
@property --bd-g2 { syntax: '<color>'; inherits: true; initial-value: #2a4884; }
@property --bd-g3 { syntax: '<color>'; inherits: true; initial-value: #213b70; }
@property --bd-frame { syntax: '<color>'; inherits: true; initial-value: #4072b2; }

html { --bd-s: 1; }
body.board-home { background: #f5d65b; }
.bd-view { position: relative; color: #15345f; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.bd-view *, .bd-view *::before, .bd-view *::after { box-sizing: border-box; }
.bd-view h1, .bd-view h2, .bd-view p { margin: 0; }
.bd-view .bd-num { font-variant-numeric: tabular-nums; }
/* every figure is DM Sans 700 (the number face of the live dashboard), tracking -0.02em */
.bd-view .bd-fig { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.bd-view .bd-serif { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.bd-view .bd-lil { font-family: 'Lilita One', 'Arial Rounded MT Bold', sans-serif; font-weight: 400; line-height: 1; white-space: nowrap; }

/* backdrop */
.bd-bgfix { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #f5d65b url('/comic-production/assets/dashboard/bg.webp') center / cover no-repeat; }
.bd-stagebg { position: absolute; z-index: 0; left: -209px; top: 3px; width: 2344px; height: 1310px; background: #f5d65b url('/comic-production/assets/dashboard/bg.webp') center / cover no-repeat; pointer-events: none; }
.bd-dragon { position: absolute; z-index: 1; pointer-events: none; }
.bd-ball { position: absolute; z-index: 20; display: block; pointer-events: none; filter: drop-shadow(10px 14px 10px rgba(60, 35, 0, 0.3)) drop-shadow(2px 3px 2px rgba(60, 35, 0, 0.22)); }

/* frames in the style of the HOOKEMON wordmark: bubbly corners, a thick navy outline, a blue band with a light highlight line,
   a thin navy line around the cream body and the wordmark's navy extrusion as an offset shadow */
.bd-view .bd-pk { position: relative; --r: 30px; --b: 8px; border-radius: var(--r); border: 4px solid #264079; background: linear-gradient(180deg, #5f92d2 0%, #4072b2 46%, #3866a6 100%); box-shadow: 6px 7px 0 #264079, 0 16px 28px rgba(74, 44, 0, 0.3); }
.bd-view .bd-pk.sm { --r: 24px; --b: 6px; box-shadow: 5px 6px 0 #264079, 0 12px 22px rgba(74, 44, 0, 0.3); }
.bd-view .bd-pk::before { content: ''; position: absolute; inset: 2px; border-radius: calc(var(--r) - 6px); border: 2px solid rgba(185, 196, 221, 0.92); pointer-events: none; }
.bd-view .bd-pk.sm::before { border-width: 1.5px; }
.bd-view .bd-pb { position: relative; margin: var(--b); border-radius: calc(var(--r) - 4px - var(--b)); border: 2px solid #264079; overflow: hidden; }
.bd-view .bd-parch { background: radial-gradient(130% 85% at 50% 28%, #fffbee 0%, #fcf5e2 58%, #f5e8c6 100%); }
.bd-view .bd-hb { position: relative; background: linear-gradient(180deg, #6497d6 0%, #4677b8 48%, #3b6bab 100%); border-bottom: 3px solid #264079; }
.bd-view .bd-hb::before { content: ''; position: absolute; left: 14px; right: 14px; top: 4px; height: 2px; border-radius: 2px; background: rgba(185, 196, 221, 0.8); }
.bd-view .bd-pt { font-family: 'Lilita One', 'Arial Rounded MT Bold', sans-serif; font-weight: 400; font-size: 36px; letter-spacing: 0.025em; line-height: 1; color: #f3cc46; -webkit-text-stroke: 6px #264079; paint-order: stroke fill; text-shadow: 3px 4px 0 #264079; white-space: nowrap; }
.bd-view .bd-brule { height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(64, 114, 178, 0) 0%, #4072b2 12%, #7fa4d6 50%, #4072b2 88%, rgba(64, 114, 178, 0) 100%); }
.bd-view .bd-hb svg { display: block; max-width: none; }
.bd-view .bd-hb .bd-hico { position: absolute; }

/* ---------- countdown tab, pack fund, next pack ---------- */
.bd-tab .bd-pb { background: linear-gradient(180deg, #1b3d6e 0%, #15345f 55%, #0f2747 100%); position: absolute; inset: var(--b); margin: 0; }
.bd-tab-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-top: 16px; }
.bd-cdlab { font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #bfd8f2; white-space: nowrap; }
.bd-cdnum { font-family: 'Lilita One', 'Arial Rounded MT Bold', sans-serif; font-weight: 400; font-size: 66px; line-height: 0.95; letter-spacing: 0.01em; color: #ffcb05; -webkit-text-stroke: 4px #2a75bb; paint-order: stroke fill; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-cdnum[data-stage]:not([data-stage='']) { font-size: 44px; }
.bd-cdnote { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bd-tab.bd-urgent .bd-pb { animation: bd-cdpulse 2s ease-in-out infinite; }
.bd-tab.bd-urgent .bd-cdnum { color: #ff5a6a; -webkit-text-stroke-color: #7a0f18; text-shadow: 0 0 12px rgba(255, 90, 106, 0.7); animation: bd-cdblink 1s steps(2, start) infinite; }
.bd-tab.bd-urgent .bd-cdlab { color: #ffb3ba; }
@keyframes bd-cdblink { to { opacity: 0.35; } }
@keyframes bd-cdpulse { 0%, 100% { background: #15345f; } 50% { background: #5a1a30; } }

.bd-box-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 2px; }
.bd-fund .bd-box-body { gap: 5px; }
.bd-next .bd-box-body { gap: 9px; }
.bd-box-label { font-size: 26px; letter-spacing: 0.02em; color: #264079; }
.bd-fund-fig { font-size: 58px; line-height: 0.92; color: #1b6e3a; white-space: nowrap; max-width: 100%; padding-inline: 8px; }
.bd-next-head { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bd-next-head svg { display: block; flex: none; }
.bd-next-row { display: flex; align-items: baseline; white-space: nowrap; max-width: 100%; padding-inline: 8px; color: #1d2e57; }
.bd-next-fig { font-size: 38px; line-height: 1; color: #1d2e57; }
.bd-next-unit { font-size: 19px; font-weight: 600; white-space: pre; }
.bd-next-row[data-kind='note'] .bd-next-fig, .bd-next-row[data-kind='none'] .bd-next-fig { font-size: 23px; line-height: 1.1; text-align: center; white-space: normal; letter-spacing: -0.01em; }

/* ---------- ladder ---------- */
.bd-lad { position: relative; z-index: 10; }
.bd-plate {
  --bd-ink: #c6d0e6; --bd-sub: #eef2fa; --bd-goink: #3a5487; --bd-track: #162a55; --bd-trackshadow: inset 0 1px 0 rgba(0, 0, 0, 0.45);
  --bd-fill: linear-gradient(90deg, #e8341c 0%, #ff5a1f 28%, #ffb000 68%, #ffe14a 100%); --bd-notch: rgba(255, 255, 255, 0.2);
  --bd-g1: #33549a; --bd-g2: #2a4884; --bd-g3: #213b70; --bd-frame: #4072b2;
  position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); z-index: var(--z); border-radius: var(--rad);
  border: 3px solid var(--bd-frame); background: linear-gradient(180deg, var(--bd-g1) 0%, var(--bd-g2) 50%, var(--bd-g3) 100%) padding-box;
  box-shadow: 0 0 0 3px #4072b2, 0 0 0 7px #264079, 6px 7px 0 7px #264079, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 12px 22px rgba(20, 30, 60, 0.28), inset 0 0 0 2px #b9c4dd, inset 0 0 0 3.5px #264079, inset 0 5px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(var(--dy)) scale(var(--sc)); filter: saturate(0.78) brightness(0.88);
  transition: --bd-g1 0.3s ease, --bd-g2 0.3s ease, --bd-g3 0.3s ease, --bd-frame 0.3s ease, box-shadow 0.35s ease, transform 0.4s ease, filter 0.4s ease;
}
.bd-plate[data-front='1'] { filter: none; }
.bd-plate[data-state='ready'] {
  --bd-ink: #f2fff7; --bd-sub: #cfefdc; --bd-track: #123f27; --bd-fill: linear-gradient(90deg, #6cc68c 0%, #b4eec6 100%); --bd-notch: rgba(255, 255, 255, 0.4);
  --bd-g1: #398557; --bd-g2: #22643c; --bd-g3: #174c2c; --bd-frame: #649377;
  box-shadow: 0 0 0 3px #649377, 0 0 0 7px #0f2d1b, 6px 7px 0 7px #0f2d1b, 0 0 16px 8px rgba(255, 201, 60, 0.42), 0 0 36px 8px rgba(110, 200, 140, 0), 0 12px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #c1d4c8, inset 0 0 0 3.5px #0f2d1b, inset 0 5px 0 rgba(255, 255, 255, 0.18);
}
.bd-lad[data-heat='1'] .bd-plate[data-state='ready'] { box-shadow: 0 0 0 3px #649377, 0 0 0 7px #0f2d1b, 6px 7px 0 7px #0f2d1b, 0 0 18px 9px rgba(255, 201, 60, 0.48), 0 0 36px 8px rgba(110, 200, 140, 0), 0 12px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #c1d4c8, inset 0 0 0 3.5px #0f2d1b, inset 0 5px 0 rgba(255, 255, 255, 0.18); }
.bd-lad[data-heat='2'] .bd-plate[data-state='ready'] { box-shadow: 0 0 0 3px #649377, 0 0 0 7px #0f2d1b, 6px 7px 0 7px #0f2d1b, 0 0 20px 9px rgba(255, 201, 60, 0.55), 0 0 36px 8px rgba(110, 200, 140, 0.12), 0 12px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #c1d4c8, inset 0 0 0 3.5px #0f2d1b, inset 0 5px 0 rgba(255, 255, 255, 0.18); }
.bd-lad[data-heat='3'] .bd-plate[data-state='ready'] { box-shadow: 0 0 0 3px #649377, 0 0 0 7px #0f2d1b, 6px 7px 0 7px #0f2d1b, 0 0 22px 10px rgba(255, 201, 60, 0.62), 0 0 36px 8px rgba(110, 200, 140, 0.2), 0 12px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #c1d4c8, inset 0 0 0 3.5px #0f2d1b, inset 0 5px 0 rgba(255, 255, 255, 0.18); }
.bd-lad[data-heat='4'] .bd-plate[data-state='ready'] { box-shadow: 0 0 0 3px #649377, 0 0 0 7px #0f2d1b, 6px 7px 0 7px #0f2d1b, 0 0 28px 12px rgba(255, 201, 60, 0.8), 0 0 36px 8px rgba(110, 200, 140, 0.34), 0 12px 22px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #c1d4c8, inset 0 0 0 3.5px #0f2d1b, inset 0 5px 0 rgba(255, 255, 255, 0.18); }
/* all six READY: the $5,000 plate is the focus */
.bd-lad[data-done='1'] .bd-plate[data-price='5000'] { box-shadow: 0 0 0 3px #649377, 0 0 0 7px #0f2d1b, 6px 7px 0 7px #0f2d1b, 0 0 30px 14px rgba(255, 200, 50, 0.9), 0 0 64px 22px rgba(255, 170, 40, 0.45), 0 14px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 2px #c1d4c8, inset 0 0 0 3.5px #0f2d1b, inset 0 0 0 0 transparent; }
.bd-plate[data-state='current'] {
  --bd-ink: #264079; --bd-sub: #264079; --bd-track: #fff6b8; --bd-trackshadow: inset 0 0 0 2px rgba(38, 64, 121, 0.55); --bd-notch: rgba(38, 64, 121, 0.5);
  --bd-fill: linear-gradient(90deg, #164127 0%, #22643c 70%, #4a805f 100%);
  --bd-g1: #fff0a0; --bd-g2: #fbdc5c; --bd-g3: #f3cc46; --bd-frame: #e2a91f;
  box-shadow: 0 0 0 3px #e2a91f, 0 0 0 7px #7e5200, 6px 7px 0 7px #7e5200, 0 0 24px 12px rgba(255, 214, 70, 0.85), 0 0 56px 20px rgba(255, 200, 60, 0.4), 0 18px 36px rgba(0, 0, 0, 0.35), inset 0 0 0 2px #fff6c4, inset 0 0 0 3.5px #7e5200, inset 0 5px 0 rgba(255, 255, 255, 0.45);
}

.bd-prow { position: absolute; left: var(--padx); right: var(--padx); top: 0; height: var(--rowh); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.bd-view .bd-packs { font-size: var(--packfs); letter-spacing: 0.07em; color: var(--bd-sub); white-space: nowrap; }
.bd-mid { position: relative; display: inline-block; }
.bd-price { font-size: var(--fs); line-height: 1; color: var(--bd-ink); white-space: nowrap; }
.bd-lock { display: none; position: absolute; right: 100%; top: 50%; width: var(--lockw); height: var(--lockh); margin-right: var(--lockgap); margin-top: var(--lockm); }
.bd-lock .bd-lk-body { fill: #9fb2d8; }
.bd-lock .bd-lk-arc { stroke: #9fb2d8; fill: none; }
.bd-lock .bd-lk-key { fill: #264079; }
.bd-plate[data-state='locked'] .bd-lock { display: block; }
.bd-right { display: flex; justify-content: flex-end; align-items: center; gap: var(--taggap); white-space: nowrap; }
.bd-r-ready, .bd-r-cur, .bd-r-lock { display: none; }
.bd-plate[data-state='ready'] .bd-r-ready { display: flex; align-items: center; gap: var(--taggap); }
.bd-r-ready svg { width: var(--icon); height: var(--icon); display: block; flex: none; }
.bd-r-ready .bd-chk-c { fill: #f2fff7; }
.bd-r-ready .bd-chk-p { stroke: #1d5535; fill: none; }
.bd-r-ready b { font-size: var(--tagfs); font-weight: 800; letter-spacing: 0.08em; color: var(--bd-ink); }
.bd-plate[data-state='current'] .bd-r-cur { display: flex; flex-direction: column; align-items: flex-end; gap: var(--gogap); padding-top: var(--stackpad); }
.bd-cap { font-size: var(--capfs); line-height: 0.9; font-weight: 800; letter-spacing: 0.1em; color: var(--bd-goink); }
.bd-big { font-size: var(--curfs); line-height: 0.92; color: #264079; }
.bd-pct { font-size: var(--pctfs); line-height: 0.92; color: var(--bd-goink); }
.bd-plate[data-state='locked'] .bd-r-lock { display: flex; flex-direction: column; align-items: center; gap: var(--gogap); }
.bd-go { font-size: var(--gofs); line-height: 1; color: #c6d0e6; }
.bd-gosub { font-size: var(--gosubfs); line-height: 1; font-weight: 800; letter-spacing: 0.1em; color: #eef2fa; }
.bd-trk { position: absolute; left: var(--padx); right: var(--padx); bottom: var(--barb); height: var(--barh); border-radius: var(--barr); background: var(--bd-track); box-shadow: var(--bd-trackshadow); overflow: hidden; transition: bottom 0.6s ease, height 0.6s ease, background 0.3s ease; }
.bd-fill { position: relative; height: 100%; width: calc(var(--pct) * 1%); border-radius: var(--barr); background: var(--bd-fill); overflow: hidden; transition: width 0.7s ease; }
.bd-notch { position: absolute; inset: 0; pointer-events: none; display: none; }
.bd-notch > span { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--bd-notch); }
.bd-plate[data-stepped='1'] .bd-notch { display: block; }
.bd-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 44px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0)); transform: translateX(-60px) skewX(-18deg); animation: bd-sweep 3.4s ease-in-out infinite; display: none; }
.bd-plate[data-state='current'] .bd-sweep { display: block; }
@keyframes bd-sweep { 0% { transform: translateX(-60px) skewX(-18deg); } 55%, 100% { transform: translateX(var(--sweepto, 280px)) skewX(-18deg); } }
.bd-tag { position: absolute; top: var(--steptop); height: var(--steph); display: none; align-items: center; padding: 0 var(--steppad); border-radius: 8px; border: 2px solid; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); font-size: var(--stepfs); font-weight: 800; letter-spacing: 0.1em; white-space: nowrap; }
.bd-tag-next { left: var(--padx); background: #264079; border-color: #f3cc46; color: #fff; animation: bd-blinkc 1s ease-in-out infinite; }
.bd-plate[data-state='current'] .bd-tag-next { display: inline-flex; }
.bd-tag-top { right: var(--padx); background: #264079; border-color: #ffc23a; color: #ffc23a; }
.bd-plate[data-price='5000'] .bd-tag-top { display: inline-flex; }
.bd-plate[data-state='locked'] .bd-tag-top { background: #1e3466; border-color: #4072b2; color: #c6d0e6; }
@keyframes bd-blinkc { 0%, 100% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 244, 190, 0); } 50% { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 12px 4px rgba(255, 244, 190, 0.9); } }

/* sparkles on READY plates: a four-point star that pops in, turns and fades (transform and opacity only) */
.bd-spk { position: absolute; width: var(--spk, 24px); height: var(--spk, 24px); left: var(--sx); top: var(--sy); margin: calc(var(--spk, 24px) / -2) 0 0 calc(var(--spk, 24px) / -2); opacity: 0; pointer-events: none; display: none; }
.bd-spk::before { content: ''; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 220, 0.95) 0%, rgba(255, 220, 110, 0.5) 36%, rgba(255, 196, 50, 0.16) 66%, rgba(255, 190, 40, 0) 100%); }
.bd-spk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, #fff 0%, #fff 28%, #fff1a8 55%, #ffc23a 100%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.bd-plate[data-state='ready'] .bd-spk { display: block; animation: bd-twinkle var(--spd, 3s) ease-in-out infinite both; animation-delay: var(--spl, 0s); }
@keyframes bd-twinkle { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 14% { opacity: 1; transform: scale(1) rotate(45deg); } 34% { opacity: 0.9; transform: scale(0.75) rotate(90deg); } 52%, 100% { opacity: 0; transform: scale(0.2) rotate(135deg); } }

/* ---------- what is HKMN ---------- */
.bd-what-list { display: flex; flex-direction: column; font-size: 26px; font-weight: 600; line-height: 1.08; color: #1d2e57; }
.bd-what-row { display: flex; align-items: center; padding: 0 0 0 10px; border-top: 2px solid #d3dcee; height: 68px; }
.bd-what-row:first-child { border-top: 0; }
.bd-what-row svg { flex: none; margin-right: 22px; width: 58px; height: 58px; display: block; max-width: none; }
.bd-what-row span { min-width: 0; text-wrap: balance; }

/* ---------- latest pull ---------- */
.bd-slab { width: 224px; height: 290px; padding: 6px; border-radius: 8px; background: linear-gradient(180deg, #252a33 0%, #0e1116 100%); border: 5px solid var(--bd-rim, #f2b705); box-shadow: 0 0 0 1.5px #5c4512, 0 0 0 6px var(--bd-halo, rgba(242, 183, 5, 0.35)), 0 0 30px var(--bd-glow, rgba(242, 183, 5, 0.85)), 0 8px 18px rgba(60, 40, 0, 0.28); }
.bd-slab { position: relative; }
.bd-slab img { position: absolute; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; border-radius: 3px; display: block; max-width: none; }
.bd-slab[data-empty='1'] img { display: none; }
.bd-slab.bd-flip { animation: bd-flip 0.7s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes bd-flip { 0% { transform: perspective(900px) rotateY(88deg); } 100% { transform: none; } }
.bd-pull-name { font-size: var(--bd-fs, 37px); font-weight: 700; line-height: 1.08; color: #1d2e57; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; overflow-wrap: anywhere; }
.bd-pull-detail { margin-top: 7px; font-size: 21px; font-weight: 500; line-height: 1.25; color: #3b4a6b; }
.bd-pull-detail .bd-fig { font-weight: 700; }
.bd-pull-sold { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding-left: 2px; white-space: nowrap; }
.bd-sold-fig { font-size: var(--bd-fs, 64px); line-height: 0.9; color: #1d2e57; }
.bd-sold-line { display: inline-flex; align-items: baseline; gap: 7px; line-height: 1; color: #5e6e8f; }
.bd-sold-line .bd-serif { font-size: 15px; font-weight: 600; letter-spacing: 0.14em; }
.bd-sold-line .bd-fig { font-size: 17px; }
.bd-stats { display: grid; grid-template-columns: minmax(0, 1fr) 3px minmax(0, 1fr); align-items: center; }
.bd-stat { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bd-stat .bd-lil { font-size: 19px; letter-spacing: 0.05em; color: #264079; }
.bd-stat .bd-fig { font-size: 44px; line-height: 0.9; color: #1d2e57; }
.bd-stat-sep { height: 62px; border-radius: 2px; background: linear-gradient(180deg, rgba(64, 114, 178, 0.12) 0%, #4072b2 50%, rgba(64, 114, 178, 0.12) 100%); }
.bd-rarities .rarity-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bd-rarities .rarity-summary-grid > div { min-width: 0; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: var(--bd-tint, #fff3c4); border: 2px solid #4072b2; border-top: 6px solid var(--bd-band, #f2b705); box-shadow: 3px 4px 0 #264079; }
.bd-rarities .rarity-summary-grid span { font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; font-weight: 600; line-height: 1; color: #2c3e66; }
.bd-rarities .rarity-summary-grid strong { font-family: 'DM Sans', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: 34px; line-height: 0.9; color: #1d2e57; }
.bd-rarities [data-rarity='common'] { --bd-band: #f2b705; --bd-tint: #fff3c4; }
.bd-rarities [data-rarity='uncommon'] { --bd-band: #28985b; --bd-tint: #ddf1e4; }
.bd-rarities [data-rarity='rare'] { --bd-band: #2879c9; --bd-tint: #ddeafa; }
.bd-rarities [data-rarity='epic'] { --bd-band: #7c3aed; --bd-tint: #ece4fc; }
.bd-rarities .pack-activity-note { margin: 8px 0 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; line-height: 1.3; color: #3b4a6b; text-align: center; }

/* ---------- top holders ---------- */
.bd-count { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px; border-radius: 20px; border: 2px solid #f3cc46; background: #264079; box-shadow: 2px 3px 0 rgba(20, 36, 74, 0.6); color: #fff4cc; white-space: nowrap; }
.bd-count .bd-fig { font-size: 18px; line-height: 1; }
.bd-count .bd-serif { font-size: 17px; font-weight: 600; line-height: 1; }
.bd-hgrid { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 84px 56px 58px; column-gap: 14px; align-items: center; }
.bd-hhead { height: 24px; padding: 0 8px 0 4px; font-size: 15px; font-weight: 600; line-height: 1; color: #2c3e66; white-space: nowrap; }
.bd-hhead span:nth-child(1) { text-align: center; }
.bd-hhead span:nth-child(2) { grid-column: 2 / 4; }
.bd-hhead span:nth-child(3) { text-align: right; }
.bd-hhead span:nth-child(4) { text-align: center; }
.bd-hhead span:nth-child(5) { text-align: right; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; }
.bd-hrow { padding: 0 8px 0 4px; height: 49px; border-top: 1px solid #e6d3a0; }
.bd-hrow.bd-first { border-top: 0; }
.bd-hrow.bd-podium { height: 46px; border: 1.5px solid; border-radius: 8px; box-shadow: 0 2px 4px rgba(60, 40, 0, 0.08); }
.bd-hrow.bd-p1 { background: linear-gradient(180deg, #fff7da 0%, #fbebbd 100%); border-color: #ddba5a; }
.bd-hrow.bd-p2 { background: linear-gradient(180deg, #f3f5f8 0%, #e1e5ec 100%); border-color: #b5becb; }
.bd-hrow.bd-p3 { background: linear-gradient(180deg, #fdebd9 0%, #f7d5b6 100%); border-color: #d9a273; }
.bd-hrank { font-size: 20px; line-height: 1; color: #2a3b63; text-align: center; }
.bd-medal { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid; box-shadow: 0 2px 4px rgba(40, 24, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6); font-size: 18px; line-height: 1; justify-self: center; }
.bd-view .bd-medal { letter-spacing: 0; }
.bd-p1 .bd-medal { background: radial-gradient(circle at 35% 30%, #fff3b8 0%, #f2c94c 46%, #c99a1e 100%); border-color: #9a7212; color: #1d2e57; }
.bd-p2 .bd-medal { background: radial-gradient(circle at 35% 30%, #fff 0%, #d9dee6 50%, #a3adba 100%); border-color: #7e8896; color: #1d2e57; }
.bd-p3 .bd-medal { background: radial-gradient(circle at 35% 30%, #ffe3c8 0%, #e3a46e 50%, #ae6a34 100%); border-color: #8a4e22; color: #2e1804; }
.bd-hav { width: 44px; height: 44px; border-radius: 50%; display: block; box-shadow: 0 0 0 1.5px rgba(29, 46, 87, 0.55), 0 2px 4px rgba(29, 46, 87, 0.2); }
.bd-hwallet { font-size: 19px; font-weight: 600; line-height: 1; color: #1d2e57; white-space: nowrap; overflow: hidden; }
.bd-hbal { font-size: 24px; line-height: 1; color: #1d2e57; text-align: right; white-space: nowrap; }
.bd-hpct { font-size: 15px; line-height: 1; color: #3b4a6b; text-align: center; white-space: nowrap; }
.bd-hmove { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 17px; line-height: 1; white-space: nowrap; color: #8c8370; }
.bd-hmove[data-kind='up'] { color: #1d5535; }
.bd-hmove[data-kind='down'] { color: #b3382a; }
.bd-hmove svg { display: block; width: 13px; height: 11px; max-width: none; }
.bd-hmove[data-kind='up'] svg { fill: #1d5535; }
.bd-hmove[data-kind='down'] svg { fill: #b3382a; }
.bd-hnew { height: 18px; display: inline-flex; align-items: center; padding: 0 5px; border-radius: 4px; border: 1px solid #d6b45e; background: #fff6da; font-size: 10px; letter-spacing: 0.08em; color: #8a6a1c; }
.bd-hnote { padding: 40px 12px; text-align: center; font-size: 18px; font-weight: 500; color: #5e6e8f; }
.bd-viewall { position: relative; display: block; height: 58px; text-decoration: none; border-radius: 18px; border: 3px solid #264079; background: linear-gradient(180deg, #6497d6 0%, #4677b8 48%, #3b6bab 100%); box-shadow: 3px 4px 0 #264079; }
.bd-viewall::before { content: ''; position: absolute; left: 10px; right: 10px; top: 3px; height: 2px; border-radius: 2px; background: rgba(185, 196, 221, 0.8); }
.bd-viewall .bd-pt { position: absolute; inset: 0 0 2px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 26px; -webkit-text-stroke-width: 5px; text-shadow: 2px 3px 0 #264079; }
.bd-viewall svg { display: block; max-width: none; }
.bd-viewall .bd-vball { position: absolute; right: 16px; top: 8px; }
.bd-viewall:focus-visible { outline: 3px solid #ffcb05; outline-offset: 3px; }

/* ---------- Professor Hook's lab (below the board, never over data) ---------- */
.bd-lab { position: relative; padding: 28px 0 40px; background: #f5d65b; }
.bd-lab .hook-arcade-arena { max-width: 1248px; width: calc(100% - 32px); margin-inline: auto; background: #fff9e8; border: 4px solid #264079; border-radius: 24px; box-shadow: 5px 6px 0 #264079; }
.bd-lab .professor-hook-voice { margin-top: 16px; }

/* ---------- desktop: the 1920 x 1080 stage, scaled ---------- */
@media (min-width: 1100px) {
  .bd-bgfix { display: none; }
  .bd-fit { position: relative; width: calc(1920px * var(--bd-s, 1)); margin-inline: auto; height: calc(1080px * var(--bd-s, 1)); overflow: hidden; background: #f5d65b; }
  /* when the window is wider than the scaled stage, the same pattern continues at the sides, lined up with the stage's own copy */
  .bd-view { background: #f5d65b url('/comic-production/assets/dashboard/bg.webp') calc(50% + 3px * var(--bd-s, 1)) calc(3px * var(--bd-s, 1)) / calc(2344px * var(--bd-s, 1)) calc(1310px * var(--bd-s, 1)) no-repeat; }
  .bd-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5d65b; transform: scale(var(--bd-s, 1)); transform-origin: 0 0; }
  /* the pattern fades into plain honey over the last 44 px, where the board meets Professor Hook's lab */
  html:not(.bd-obs) .bd-stagebg { -webkit-mask-image: linear-gradient(180deg, #000 1033px, transparent 1077px); mask-image: linear-gradient(180deg, #000 1033px, transparent 1077px); }
  .bd-cam { position: absolute; left: 2px; top: 0; width: 1918px; height: 1080px; }
  .bd-view .bd-pk, .bd-view .bd-pk.sm { position: absolute; z-index: 20; }
  .bd-view .bd-pb { position: absolute; inset: var(--b); margin: 0; }
  .bd-stagebg { z-index: 0; }
  .bd-dragon { left: 528px; top: 230px; width: 860px; height: 592px; clip-path: polygon(0 0, 100% 0, 100% 100%, 430px 100%, 430px 572px, 0 572px); }
  .bd-ball { left: 1501px; top: 23px; width: 266px; height: 264px; object-fit: contain; }
  .bd-lad { position: absolute; left: -1px; top: 0; width: 1918px; height: 1080px; }
  .bd-tab { left: 808px; top: -14px; width: 300px; height: 118px; }
  .bd-fund { left: 680px; top: 112px; width: 257px; height: 122px; }
  .bd-next { left: 964px; top: 112px; width: 269px; height: 122px; }
  .bd-what { left: 40px; top: 40px; width: 580px; height: 380px; }
  .bd-what .bd-hb { height: 64px; }
  .bd-what-list { position: absolute; left: 14px; right: 14px; top: 70px; }
  .bd-pull { left: 40px; top: 438px; width: 580px; height: 589px; }
  .bd-pull .bd-hb { height: 60px; }
  .bd-slab { position: absolute; left: 20px; top: 72px; }
  .bd-pull-text { position: absolute; left: 266px; top: 80px; width: 268px; height: 276px; display: flex; flex-direction: column; }
  .bd-pull-text .bd-brule { flex: none; margin-top: 16px; }
  .bd-pull-text .bd-brule:last-child { margin-top: 0; }
  .bd-stats { position: absolute; left: 18px; top: 384px; width: 516px; height: 70px; }
  .bd-rarities { position: absolute; left: 18px; top: 466px; width: 512px; }
  .bd-holders { left: 1345px; top: 296px; width: 533px; height: 731px; }
  .bd-holders .bd-hb { height: 68px; }
  .bd-hhead { position: absolute; left: 8px; top: 82px; width: 488px; }
  .bd-hlist { position: absolute; left: 8px; top: 117px; width: 488px; }
  .bd-hlist .bd-podiums { display: flex; flex-direction: column; gap: 10px; }
  .bd-hlist .bd-rest { margin-top: 8px; }
  .bd-hnote { position: absolute; left: 8px; top: 117px; width: 488px; }
  .bd-viewall { position: absolute; left: 8px; top: 633px; width: 486px; }
}

/* ---------- narrow: one readable column ---------- */
@media (max-width: 1099.98px) {
  .bd-fit { position: relative; }
  .bd-stage { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 18px 16px 34px; max-width: 560px; margin-inline: auto; }
  .bd-cam { display: contents; }
  .bd-stagebg { display: none; }
  .bd-dragon { display: none; }
  .bd-lad { position: relative; width: 100%; height: var(--bd-lad-h, 560px); margin-inline: auto; }
  html:not(.bd-obs) .bd-lad { display: flex; flex-direction: column; gap: 22px; height: auto; padding: 12px; }
  html:not(.bd-obs) .bd-lad .bd-plate { position: relative; left: auto; top: auto; width: 100%; height: 78px; transform: none; }
  html:not(.bd-obs) .bd-lad .bd-plate[data-front='1'] { height: 124px; }
  html:not(.bd-obs) .bd-lad .bd-prow { left: 14px; right: 14px; height: 60px; }
  html:not(.bd-obs) .bd-lad .bd-plate[data-state='current'] .bd-prow { height: 60px; }
  html:not(.bd-obs) .bd-lad .bd-price { font-size: min(var(--fs), 30px); }
  html:not(.bd-obs) .bd-lad .bd-plate[data-front='1'] .bd-prow { height: 102px; }
  html:not(.bd-obs) .bd-lad .bd-plate[data-front='1'] .bd-price { font-size: 44px; }
  html:not(.bd-obs) .bd-lad .bd-big { font-size: min(var(--curfs), 22px); }
  html:not(.bd-obs) .bd-lad .bd-go { font-size: min(var(--gofs), 22px); }
  html:not(.bd-obs) .bd-lad .bd-r-cur { padding-top: 0; }
  html:not(.bd-obs) .bd-lad .bd-trk { bottom: 6px; height: 6px; }
  /* the narrow plate: price (with the lock) over the pack count on the left, the status on the right */
  .bd-prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'price right' 'packs right'; align-content: center; row-gap: 2px; }
  .bd-mid { grid-area: price; display: flex; align-items: center; gap: 7px; }
  .bd-lock { position: static; margin: 0; flex: none; }
  .bd-packs { grid-area: packs; }
  .bd-right { grid-area: right; align-self: center; }
  .bd-plate[data-state='current'] .bd-prow { top: 9px; height: calc(var(--rowh) - 9px); }
  .bd-lad-wrap { position: relative; order: 4; margin-top: 4px; }
  .bd-lad-wrap::before { content: ''; position: absolute; inset: 0 -10px; background: url('/comic-production/assets/dashboard/dragon.webp') center / contain no-repeat; opacity: 0.92; pointer-events: none; }
  .bd-toprow { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .bd-tab { grid-column: 1 / -1; min-height: 88px; }
  .bd-tab .bd-tab-body { position: relative; inset: auto; padding: 22px 0 14px; }
  .bd-tab .bd-pb { position: absolute; }
  .bd-fund, .bd-next { min-height: 104px; }
  .bd-fund .bd-pb, .bd-next .bd-pb { position: absolute; inset: var(--b); margin: 0; }
  .bd-fund .bd-box-body, .bd-next .bd-box-body { position: relative; inset: auto; margin: var(--b); padding: 12px 4px; min-height: 86px; }
  .bd-fund-fig { font-size: clamp(28px, 8vw, 40px); }
  .bd-box-label { font-size: 19px; }
  .bd-next-fig { font-size: 30px; }
  .bd-next-unit { font-size: 16px; }
  .bd-next-row[data-kind='note'] .bd-next-fig { font-size: 16px; }
  .bd-pull { order: 2; }
  .bd-holders-wrap { order: 5; display: flex; flex-direction: column; gap: 6px; }
  .bd-what { order: 0; }
  .bd-ball { display: none; }
  .bd-view .bd-hb { height: 58px; }
  .bd-view .bd-hb .bd-pt { left: 74px !important; top: 0 !important; height: 55px !important; font-size: 28px; -webkit-text-stroke-width: 5px; text-shadow: 2px 3px 0 #264079; }
  .bd-view .bd-hb .bd-hico { top: 8px !important; }
  .bd-view .bd-hb svg.bd-hico:first-child { left: 14px !important; transform: scale(0.82); transform-origin: left center; }
  .bd-view .bd-hb .bd-hb-target, .bd-view .bd-hb .bd-spark-a, .bd-view .bd-hb .bd-spark-b { display: none; }
  .bd-holders .bd-hb .bd-pt { font-size: 22px; left: 62px !important; }
  .bd-holders .bd-hb svg.bd-hico:first-child { top: 8px !important; transform: scale(0.68); }
  .bd-what-list { font-size: 20px; padding: 2px 10px 6px 4px; }
  .bd-what-row { height: auto; min-height: 62px; padding: 8px 0 8px 6px; }
  .bd-what-row svg { width: 44px; height: 44px; margin-right: 14px; }
  .bd-pull .bd-pb { padding: 0 0 16px; }
  .bd-pull-top, .bd-stats, .bd-rarities { margin-inline: 14px; }
  .bd-pull-top { margin-top: 14px; display: grid; grid-template-columns: minmax(118px, 42%) minmax(0, 1fr); gap: 16px; align-items: start; }
  .bd-slab { width: 100%; height: auto; aspect-ratio: 224 / 290; }
  .bd-pull-text { display: flex; flex-direction: column; min-width: 0; }
  .bd-pull-text .bd-brule { margin-top: 12px; }
  .bd-pull-text .bd-brule:last-child { margin-top: 12px; }
  .bd-pull-name { font-size: calc(var(--bd-fs, 37px) * 0.64); }
  .bd-pull-detail { font-size: 16px; }
  .bd-pull-sold { padding-block: 12px; gap: 8px; }
  .bd-sold-fig { font-size: min(calc(var(--bd-fs, 64px) * 0.62), 9vw); }
  .bd-stats { margin-top: 18px; }
  .bd-stat .bd-lil { font-size: clamp(11px, 3vw, 15px); }
  .bd-stat .bd-fig { font-size: 36px; }
  .bd-rarities { margin-top: 16px; }
  .bd-rarities .rarity-summary-grid { gap: 8px; }
  .bd-rarities .rarity-summary-grid > div { height: 70px; }
  .bd-rarities .rarity-summary-grid strong { font-size: 28px; }
  .bd-rarities .rarity-summary-grid span { font-size: 11.5px; }
  .bd-holders .bd-pb { padding: 0 0 14px; }
  .bd-hhead, .bd-hlist, .bd-viewall, .bd-hnote { margin-inline: 8px; }
  .bd-hhead { margin-top: 12px; }
  .bd-hgrid { grid-template-columns: 26px 30px minmax(0, 1fr) 54px 44px 34px; column-gap: 6px; }
  .bd-hhead { font-size: 12px; padding-left: 2px; padding-right: 2px; margin-bottom: 8px; margin-top: 12px; }
  .bd-hrow { height: 46px; padding-inline: 2px; }
  .bd-hrow.bd-podium { height: 44px; }
  .bd-hlist .bd-podiums { display: flex; flex-direction: column; gap: 8px; }
  .bd-hlist .bd-rest { margin-top: 6px; }
  .bd-medal { width: 26px; height: 26px; font-size: 13px; }
  .bd-hrank { font-size: 15px; }
  .bd-hav { width: 30px; height: 30px; }
  .bd-hwallet { font-size: 14px; }
  .bd-hbal { font-size: 16px; }
  .bd-hpct { font-size: 11px; }
  .bd-hmove { font-size: 13px; gap: 4px; }
  .bd-hmove svg { width: 10px; height: 9px; }
  .bd-hnew { font-size: 8px; padding: 0 3px; height: 16px; }
  .bd-viewall { margin-top: 14px; }
  .bd-viewall .bd-pt { font-size: 22px; gap: 8px; }
  .bd-view .bd-hb .bd-count { right: 8px !important; top: 12px !important; height: 32px; padding: 0 10px; gap: 5px; }
  .bd-count .bd-fig { font-size: 15px; }
  .bd-count .bd-serif { font-size: 14px; }
}

/* OBS: ?obs=1 shows the stage alone, fitted to the window, without the header and the lab */
html.bd-obs body.board-home { padding-top: 0; }
html.bd-obs .site-header, html.bd-obs .skip-link, html.bd-obs .bd-lab { display: none; }
html.bd-obs .bd-fit { height: calc(1080px * var(--bd-s, 1)); margin-inline: auto; width: calc(1920px * var(--bd-s, 1)); }

@media (prefers-reduced-motion: reduce) {
  .bd-plate, .bd-trk, .bd-fill { transition: none; }
  .bd-spk, .bd-sweep, .bd-tag-next, .bd-tab.bd-urgent .bd-pb, .bd-tab.bd-urgent .bd-cdnum, .bd-slab.bd-flip { animation: none; }
  .bd-plate[data-state='ready'] .bd-spk { opacity: 0; }
  .bd-plate[data-state='ready'] .bd-spk:first-of-type { opacity: 0.9; transform: scale(0.85); }
}

/* very narrow phones (320-380 px): the panel titles shrink so "WHAT IS HKMN?" and the others stay inside their bar */
@media (max-width: 380px) {
  .bd-view .bd-hb .bd-pt { font-size: 22px; letter-spacing: 0.01em; -webkit-text-stroke-width: 4px; }
  .bd-view .bd-hb { overflow: hidden; }
}

/* the top row never widens the page: its columns may shrink below their text, long figures shrink or wrap instead */
@media (max-width: 1099.98px) {
  .bd-toprow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bd-toprow > * { min-width: 0; max-width: 100%; }
  .bd-toprow .bd-box-body, .bd-toprow .bd-tab-body { overflow: hidden; }
}
@media (max-width: 380px) {
  .bd-stage { padding-inline: 12px; }
  .bd-box-label { font-size: 16px; }
  .bd-next-row[data-kind='note'] .bd-next-fig { font-size: 14px; }
  .bd-pull-top { margin-inline: 10px; gap: 10px; grid-template-columns: minmax(100px, 42%) minmax(0, 1fr); }
  .bd-pull-detail { font-size: 14px; }
  .bd-rarities .rarity-summary-grid { gap: 6px; }
  .bd-rarities .rarity-summary-grid span { font-size: 9px; }
  .bd-stats, .bd-rarities { margin-inline: 10px; }
  .bd-hgrid { grid-template-columns: 22px 26px minmax(0, 1fr) 46px 36px 28px; column-gap: 4px; }
  .bd-hwallet { font-size: 12px; }
  .bd-hbal { font-size: 14px; }
  .bd-holders .bd-hb .bd-pt { font-size: 17px; left: 52px !important; }
  .bd-view .bd-hb .bd-count { padding-inline: 6px; gap: 3px; }
  .bd-count .bd-fig, .bd-count .bd-serif { font-size: 12px; }
}

/* Tablets use the available width without shrinking text to desktop proportions. */
@media (min-width: 700px) and (max-width: 1099.98px) {
  html:not(.bd-obs) .bd-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1000px; gap: 24px; align-items: start; }
  html:not(.bd-obs) .bd-toprow { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  html:not(.bd-obs) .bd-tab { grid-column: auto; min-height: 104px; }
  html:not(.bd-obs) .bd-pull { grid-column: 1; grid-row: 2; }
  html:not(.bd-obs) .bd-lad-wrap { grid-column: 2; grid-row: 2; margin-top: 0; }
  html:not(.bd-obs) .bd-holders-wrap { grid-column: 1; grid-row: 3; }
  html:not(.bd-obs) .bd-what { grid-column: 2; grid-row: 3; }
  html:not(.bd-obs) .bd-sold-fig { font-size: min(calc(var(--bd-fs, 64px) * 0.5), 36px); }
  html:not(.bd-obs) .bd-stat .bd-lil { font-size: 11px; }
  html:not(.bd-obs) .bd-rarities .rarity-summary-grid span { font-size: 10px; }
  html:not(.bd-obs) .bd-holders .bd-hb .bd-pt { font-size: 19px; }
  html:not(.bd-obs) .bd-hb .bd-count { padding-inline: 6px; gap: 3px; }
  html:not(.bd-obs) .bd-count .bd-fig, html:not(.bd-obs) .bd-count .bd-serif { font-size: 12px; }
}

@media (min-width: 1100px) {
  html:not(.bd-obs) .bd-view { min-height: calc(100svh - 78px); display: grid; align-content: center; padding-block: 16px; }
  html:not(.bd-obs) .bd-tab { top: 0; }
  html:not(.bd-obs) .bd-fund, html:not(.bd-obs) .bd-next { top: 130px; }
}

/* desktop: the dashboard is fixed, the page never scrolls (owner, 2026-10-08); Hook's voice toggle floats in the lower left corner */
@media (min-width: 1100px) {
  html:has(body.board-home), body.board-home { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body.board-home .page-scroll { overflow: hidden; }
  .bd-lab { position: fixed; left: 16px; bottom: 14px; z-index: 30; padding: 0; background: none; }
  .bd-lab .professor-hook-voice { margin-top: 0; }
}

.bd-recent { order: 3; }
.bd-recent-title { margin: 0; padding: 8px 12px; color: #f3cc46; background: linear-gradient(#6497d6, #3b6bab); border-bottom: 3px solid #264079; font-family: 'Lilita One', 'Arial Rounded MT Bold', sans-serif; font-size: 28px; font-weight: 400; text-align: center; -webkit-text-stroke: 3px #264079; paint-order: stroke fill; }
.bd-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.bd-recent-grid > .pack-activity-note { grid-column: 1 / -1; }
.bd-recent-card { min-width: 0; text-align: center; color: #203860; }
.bd-recent-art { height: 104px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bd-recent-art img { width: 100%; height: 100%; object-fit: contain; }
.bd-recent-card h3 { margin: 4px 0 0; font: 700 18px/1.25 'DM Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-recent-value { margin: 2px 0; font: 700 16px/1.3 'DM Sans', sans-serif; }
.bd-recent-card time { display: block; font: 14px/1.3 'DM Sans', sans-serif; }
@media (min-width: 1100px) {
  .bd-recent { left: 1345px; top: 20px; width: 533px; height: 260px; }
}
@media (max-width: 699.98px) {
  .bd-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 12px; }
  .bd-recent-art { height: 118px; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  html:not(.bd-obs) .bd-recent { grid-column: 1 / -1; grid-row: 4; }
}