/* Display Box header – built to the Header-Menu and Header-Menu-Mobile boards (Moducase canvas). */
@font-face{font-family:Michroma;font-style:normal;font-weight:400;font-display:swap;src:url(../../tcg/assets/fonts/michroma.woff2) format("woff2")}

/* theme header off while this one is showing */
body.dbxh-on .l-header{display:none!important}
body.dbxh-on{--header-height:0px;--header-sticky-height:0px}
body.dbxh-on .l-canvas,body.dbxh-on.header_hor .l-main{padding-top:0!important}

.dbxh{--c:#23DAF7;--v:#9729FE;--p:#FE32A6;--soft:#9EA1BC;position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) - 38px);z-index:9990;font-family:Montserrat,Arial,sans-serif;color:#EDEDF4;-webkit-font-smoothing:antialiased;line-height:1.35}
.dbxh *,.dbxh *:before,.dbxh *:after{box-sizing:border-box}
:where(.dbxh) a{color:inherit;text-decoration:none}
.dbxh a:focus-visible,.dbxh button:focus-visible,.dbxh input:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.dbxh img{max-width:100%}
.dbxh b{font-weight:700}
.dbxh small{font-size:12px;color:var(--soft)}
.dbxh-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.dbxh-g{display:grid}
.dbxh-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.dbxh-g>*{min-width:0}
.dbxh-eye{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--soft)}
.dbxh-eye.is-c{color:var(--c);font-size:10.5px}

/* top banner bar */
.dbxh-hb{position:relative;background:linear-gradient(90deg,#0B0C16,#151937 50%,#0B0C16);font-size:12px;font-weight:600;letter-spacing:.02em;color:#C9CBDC}
.dbxh-hb:after,.dbxh-mtop:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#23DAF7 25%,#9729FE 55%,#FE32A6 80%,transparent)}
.dbxh-hb .dbxh-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:38px}
.dbxh-it{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.dbxh-it b{color:#fff}
.dbxh-ms{height:20px;width:auto}
.dbxh-stars{display:inline-flex;gap:2px}
.dbxh-sep{width:1px;height:14px;background:rgba(255,255,255,.14);flex:0 0 auto}
@media (max-width:1200px){.dbxh-hb .dbxh-it:nth-of-type(4),.dbxh-hb .dbxh-sep:nth-of-type(3){display:none}}
.dbxh-mtop{display:none}

/* main bar */
.dbxh-hd{position:relative;background:#12131F;border-bottom:1px solid #1E2135}
.dbxh-hd>.dbxh-wrap{display:flex;align-items:center;gap:36px;height:76px}
.dbxh-logo{flex:0 0 auto;display:block}
.dbxh-logo img{display:block;height:30px;width:auto}
.dbxh-nv{height:100%}
.dbxh-nv ul{display:flex;gap:6px;height:100%;margin:0;padding:0;list-style:none}
.dbxh-li{height:100%;margin:0}
.dbxh-top{display:flex;align-items:center;gap:7px;height:100%;padding:0 14px;white-space:nowrap;font-family:Michroma,Arial,sans-serif;font-size:12.5px;letter-spacing:.03em;color:#D9DAE8;border-bottom:3px solid transparent;transition:color .15s}
.dbxh-caret{width:10px;height:10px;opacity:.7;transition:transform .2s}
.dbxh-li.is-open .dbxh-top,.dbxh-top:hover{color:#fff}
.dbxh-li.is-open .dbxh-top{border-bottom-color:var(--c)}
.dbxh-li.is-open .dbxh-caret{transform:rotate(180deg)}
@media (max-width:1240px){.dbxh-hd>.dbxh-wrap{gap:20px}.dbxh-nv ul{gap:0}.dbxh-top{padding:0 10px;font-size:11.5px}}
.dbxh-ics{margin-left:auto;display:flex;align-items:center;gap:18px;color:#D9DAE8}
.dbxh-ic{all:unset;position:relative;display:inline-flex;cursor:pointer;color:#D9DAE8}
.dbxh-ic:hover{color:#fff}
.dbxh-ic svg{width:21px;height:21px}
.dbxh-count{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:linear-gradient(90deg,#23DAF7,#9729FE);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center}
.dbxh-count[hidden]{display:none}
.dbxh-burger{display:none}

/* dropdown panels */
.dbxh-pnw{position:absolute;left:0;right:0;top:100%;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility 0s .16s;pointer-events:none}
.dbxh-li.is-open .dbxh-pnw{visibility:visible;opacity:1;transform:none;transition:opacity .16s,transform .16s;pointer-events:auto}
html:not(.dbxh-js) .dbxh-li:focus-within .dbxh-pnw{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.dbxh-pn{margin-top:-1px;background:linear-gradient(180deg,#191C33,#13152A);border:1px solid #23263E;border-top:none;border-radius:0 0 22px 22px;box-shadow:0 30px 60px rgba(0,0,0,.5);padding:28px 30px 22px}
.dbxh-pft{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;color:var(--soft)}
.dbxh-pft a{margin-left:auto;font-weight:800;color:#fff;white-space:nowrap}
.dbxh-pft a:hover{color:var(--c)}

.dbxh-sc{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-bottom:3px solid var(--c);transition:transform .2s,background .2s}
.dbxh-sc:hover,.dbxh-rl:hover,.dbxh-hl:hover,.dbxh-lt:hover,.dbxh-st:hover,.dbxh-ft:hover{background:rgba(255,255,255,.07)}
.dbxh-sc:hover{transform:translateY(-2px)}
.dbxh-im{position:relative;aspect-ratio:1200/880;overflow:hidden}
.dbxh-im img{position:absolute;left:0;top:-3%;width:100%;height:auto}
.dbxh-tx{display:flex;flex-direction:column;gap:3px;padding:11px 14px 13px}
.dbxh-sc b{font-family:Michroma,Arial,sans-serif;font-weight:400;font-size:14px;color:#fff}
.dbxh-rl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.dbxh-rl img{width:62px;height:46px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.dbxh-rl b{font-size:13.5px;color:#fff}
.dbxh-rl small,.dbxh-hl small{display:block;margin-top:2px}
.dbxh-wd{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#1E2552,#141838);border:1px solid rgba(143,134,232,.3)}
.dbxh-wd:hover{border-color:var(--c)}
.dbxh-wd img{display:block;width:100%;height:130px;object-fit:cover}
.dbxh-wd>span{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.dbxh-wd b{font-size:14px;color:#fff}
.dbxh-wd small{color:#AEB0C6}
.dbxh-hl{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.dbxh-hl b{font-size:14px;color:#fff}
.dbxh-hl small{font-size:12.5px}
.dbxh-lt{display:flex;align-items:center;justify-content:center;height:96px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.dbxh-lt img{width:auto;max-width:100%;object-fit:contain}
.dbxh-lt.is-all{flex-direction:column;gap:4px}
.dbxh-lt.is-all b{font-size:13px;color:#fff}
.dbxh-ft{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.dbxh-ft img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.dbxh-ft b{padding:12px 14px 2px;font-size:14px;color:#fff}
.dbxh-ft small{padding:0 14px 14px}
.dbxh-fe{position:relative;display:block;min-height:300px;border-radius:16px;overflow:hidden;background:#0E1020}
.dbxh-fe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 30%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.dbxh-fe:hover img{transform:scale(1.04)}
.dbxh-fe-sh{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,20,.95) 0%,rgba(10,11,20,.4) 45%,rgba(10,11,20,0) 70%)}
.dbxh-fe-tx{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:4px}
.dbxh-fe-tx b{font-family:Michroma,Arial,sans-serif;font-weight:400;font-size:16px;color:#fff}
.dbxh-fe-tx small{font-size:12.5px;color:#C9CBDC}
.dbxh-st{display:flex;align-items:center;justify-content:center;height:78px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.dbxh-st img{width:auto;max-width:100%;object-fit:contain}
.dbxh-st b{font-size:13px;text-align:center}
.dbxh-more{font-size:13px;font-weight:700;color:#fff;align-self:flex-start}
.dbxh-more:hover{color:var(--c)}
.dbxh-gd{display:flex;gap:16px;align-items:center;padding:16px;border-radius:14px;background:linear-gradient(180deg,#1E2552,#141838);border:1px solid rgba(143,134,232,.3)}
.dbxh-gd:hover{border-color:var(--c)}
.dbxh-gd img{width:120px;height:76px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.dbxh-gd>span{display:flex;flex-direction:column;gap:3px}
.dbxh-gd b{font-size:15px;color:#fff}
.dbxh-gd small{font-size:12.5px;color:#AEB0C6}

/* search row */
.dbxh-search{border-top:1px solid #1E2135;background:#151729}
.dbxh-search .dbxh-wrap{display:flex;gap:10px;padding-top:12px;padding-bottom:12px}
.dbxh-search input[type=search]{flex:1;min-width:0;height:46px;padding:0 18px;border-radius:999px;border:1px solid #2E3250;background:#12131F;color:#fff;font:600 15px Montserrat,Arial,sans-serif}
.dbxh-search button{height:46px;padding:0 24px;border:0;border-radius:999px;background:#fff;color:#101119;font:800 14px Montserrat,Arial,sans-serif;cursor:pointer}
.dbxh-search[hidden]{display:none}

/* phone drawer (hidden on desktop) */
.dbxh-drawer{display:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ---------- phones and tablets ---------- */
@media (max-width:1024px){
	.dbxh{top:calc(var(--wp-admin--admin-bar--height,0px) - 32px)}
	.dbxh-hb,.dbxh-nv,.dbxh-me{display:none}
	.dbxh-mtop{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 10px;font-size:11.5px;font-weight:600;color:#C9CBDC;white-space:nowrap;overflow:hidden;background:linear-gradient(90deg,#0B0C16,#151937 50%,#0B0C16)}
	.dbxh-mtop b{color:#fff}
	.dbxh-wrap{padding:0 16px}
	.dbxh-hd>.dbxh-wrap{height:60px;gap:14px}
	.dbxh-logo img{height:22px}
	.dbxh-ics{gap:16px}
	.dbxh-ic svg{width:22px;height:22px}
	.dbxh-burger{display:inline-flex;color:#fff}
	.dbxh-burger svg+svg,.dbxh-burger[aria-expanded=true] svg:first-child{display:none}
	.dbxh-burger[aria-expanded=true] svg+svg{display:block}
	.dbxh-drawer{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--dbxh-dtop,92px);overflow-y:auto;overscroll-behavior:contain;background:#12131F;z-index:9991}
	.dbxh-drawer[hidden]{display:none}
	.dbxh-dr-in{max-width:560px;margin:0 auto;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
body.dbxh-lock{overflow:hidden}
.dbxh-acc{border-bottom:1px solid #1E2135}
.dbxh-acc>button{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px;font-family:Michroma,Arial,sans-serif;font-size:14px;letter-spacing:.03em;color:#fff}
.dbxh-pl:before{content:"+";font-family:Montserrat,Arial,sans-serif;font-size:22px;line-height:1;color:var(--c)}
.dbxh-acc>button[aria-expanded=true] .dbxh-pl:before{content:"−"}
.dbxh-ab{display:flex;flex-direction:column;gap:10px;padding:0 16px 18px}
.dbxh-ab[hidden]{display:none}
.dbxh-ab.is-help{gap:4px}
.dbxh-mrow{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.dbxh-mg2 .dbxh-mrow:not(:has(.dbxh-th)){padding:12px}
.dbxh-mt{flex:1;min-width:0;text-align:left}
.dbxh-mt b{display:block;font-size:13.5px;color:#fff}
.dbxh-mt small{font-size:11.5px}
.dbxh-th{position:relative;width:50px;height:42px;flex:0 0 auto;overflow:hidden;border-radius:8px;background:#151830;display:flex;align-items:center;justify-content:center}
.dbxh-th img{width:100%;height:100%;object-fit:contain;transform:scale(1.9);transform-origin:50% 48%}
.dbxh-th.is-ph img{object-fit:cover;transform:none}
.dbxh-ar{margin-left:auto;padding-right:6px;color:var(--soft)}
.dbxh-mg2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dbxh-mg3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dbxh-mg2>*,.dbxh-mg3>*{min-width:0}
.dbxh-mtl{display:flex;align-items:center;justify-content:center;height:56px;padding:0 8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.dbxh-mtl img{width:auto;max-width:100%;object-fit:contain}
.dbxh-mtl b{font-size:11px;text-align:center}
.dbxh-mfr{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:700;color:#fff;text-align:center}
.dbxh-mfr img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.dbxh-fe.is-m{min-height:0;height:150px;border-radius:14px}
.dbxh-fe.is-m .dbxh-fe-sh{background:linear-gradient(0deg,rgba(10,11,20,.95),rgba(10,11,20,0) 65%)}
.dbxh-fe.is-m .dbxh-fe-tx{left:14px;bottom:12px;gap:2px}
.dbxh-fe.is-m .dbxh-fe-tx b{font-family:Montserrat,Arial,sans-serif;font-weight:700;font-size:13.5px}
.dbxh-mall{display:block;margin-top:4px;padding:12px;border-radius:999px;background:#fff;color:#101119!important;font-size:13px;font-weight:800;text-align:center}
.dbxh-hrow{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 6px;border-bottom:1px solid rgba(255,255,255,.06);color:#fff;font-size:14px;font-weight:600}
.dbxh-chips{display:flex;gap:6px;margin-left:auto}
.dbxh-gchip{font-size:11px;font-weight:700;color:#C9CBDC;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
.dbxh-mfoot{display:flex;flex-direction:column;gap:12px;padding:18px;font-size:13px;color:#C9CBDC}
.dbxh-macc{color:#fff;font-weight:600}
.dbxh-wab{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px 18px 18px 4px;background:#25D366;color:#fff!important;box-shadow:0 6px 18px rgba(37,211,102,.25)}
.dbxh-wat{display:flex;flex-direction:column;gap:2px}
.dbxh-wat b{font-size:14px}
.dbxh-wat small{font-size:12px;color:#fff;opacity:.85;font-weight:600}
.dbxh-socs{display:flex;align-items:center;gap:10px}
.dbxh-socs>span{font-size:12.5px;color:var(--soft);margin-right:4px}
.dbxh-soc{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.dbxh-mnote{font-size:12px;color:#7D80A0}
@media (prefers-reduced-motion:reduce){.dbxh *{transition:none!important}}
/* Prime 1 Studio's logo is very wide: give it a double-width tile so it reads clearly */
.dbxh-st.is-wide{grid-column:span 2;padding:0 22px}
.dbxh-st.is-wide img{width:100%;max-width:300px;height:auto}
.dbxh-mtl.is-wide{grid-column:span 2}
.dbxh-mtl.is-wide img{width:auto;max-width:92%}
