@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;position:relative;font-family:"Segoe UI",Arial,"Microsoft YaHei",sans-serif}
html{background:#faf7f1}
body{background:#f3ede1;-webkit-text-size-adjust:100%;text-size-adjust:100%;color:#655744}
a{text-decoration:none;cursor:pointer;touch-action:manipulation}
img{display:block;max-width:100%;border:0}
.wrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-height:100%;margin:0 auto;background:#f3ede1}
.full-content{position:relative;display:flex;flex-direction:column;width:min(100%,640px);min-height:100vh}
.main-content{display:flex;flex:1;width:100%;background:#faf7f1 url('../img/bg.png') top center/cover no-repeat}
/* Reference MJHL uses a 750 x 1344 design canvas, scaled by both width and height. */
.safe-content{display:flex;flex-direction:column;width:7.5rem;max-width:100%;height:auto;padding:.18rem .24rem .16rem;margin:auto}
.head_nav{width:94%;margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:1}
.logo{display:flex;justify-content:center;width:100%}
.logo img{width:3.6rem;height:auto}
/* These existing PNGs have already been trimmed: no negative overlap needed. */
.kv{display:flex;justify-content:center;align-items:center;width:100%;height:auto;margin:.06rem auto .08rem}
.kv img{display:block;width:100%;height:auto}
.info{display:flex;flex-direction:column;justify-content:center;padding:0 .1rem}
.info .info-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:.96rem;min-height:40px;gap:.16rem;margin-bottom:.16rem;padding:.12rem .36rem;background:url('../img/itembtn.png') center/100% 100% no-repeat;border-radius:.2rem;transition:transform .15s}
.info .info-btn:last-child{margin-bottom:0}
.info-btn img{width:2.6rem;height:auto;max-height:100%;object-fit:contain;min-width:0}
.info-btn span{display:flex;align-items:center;justify-content:center;flex:none;width:2.1rem;min-height:30px;height:.56rem;padding:0 .1rem;border-radius:.4rem;font-size:max(12px,.30rem);color:#fff;white-space:nowrap}
.info-btn span.gold{background:linear-gradient(135deg,#dfc477,#cba64e 50%,#ba913e);box-shadow:0 3px 8px #ba913e38}
.info-btn span.blue{background:linear-gradient(135deg,#2687ff,#0865ec);box-shadow:0 3px 8px #1477ee20}
.ft{width:100%;margin:.13rem auto 0;text-align:center}
.ft p{font-size:max(9px,.18rem);color:#938774;line-height:1.5;overflow-wrap:anywhere}
a:focus-visible{outline:2px solid #b9904e;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.info-btn:hover{transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Site-specific hues, matched to existing brand logos. */
.info-btn[id="6788link"] span{background:linear-gradient(135deg,#e0ca88,#c3a04a);box-shadow:0 3px 8px #b99a4030}
.info-btn[id="2368link"] span{background:linear-gradient(135deg,#36b4df,#0789c7);box-shadow:0 3px 8px #0789c730}
.info-btn[id="1573link"] span{background:linear-gradient(135deg,#3289ea,#1553b8);box-shadow:0 3px 8px #1553b830}
.info-btn[id="6377link"] span{background:linear-gradient(135deg,#dbb348,#b58520);box-shadow:0 3px 8px #b5852030}
.info-btn[id="6899link"] span{background:linear-gradient(135deg,#b99452,#84602e);box-shadow:0 3px 8px #84602e30}