/* B33 game hubs (/mtg, /yugioh; generated by claude/tools/b33/hubs/build-hubs.js). Loaded after styles.css and shop.css.
   Colours are the site's theme variables, so both themes read well. The picture buttons carry their own words (house style);
   the captions under them use theme text colours. */
body.hbPage{padding-bottom:30px;overflow-x:hidden;background:var(--shell);color:var(--paper)}
body.hbPage [hidden]{display:none!important}
.hbPage .top{height:auto;min-height:0;flex-wrap:nowrap;padding:8px 16px}
.hbPage .brand::before{display:none}
.hbPage .pBack{display:flex;align-items:center;gap:10px;min-width:0}
.hbPage .pBack .brand{font-size:15px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hbPage .pHome{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(var(--fgr),.075);color:var(--paper);flex:0 0 auto}
.hbPage .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.hb{max-width:1136px;margin:0 auto;padding:18px 22px 20px}
.hbHero{text-align:center}
.hbHeroImg{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);background:var(--raise)}
.hb h1{margin:20px 0 0;font-size:clamp(28px,4.4vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.hbLede{margin:10px auto 0;max-width:760px;font-size:17px;line-height:1.55;color:var(--muted)}

.hbBtns{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}   /* B50d: 4 buttons (+ music) */
@media(max-width:1100px){.hbBtns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hbBtns{grid-template-columns:minmax(0,1fr)}}
.hbBtn{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border-radius:16px;overflow:hidden;border:1px solid rgba(var(--fgr),.1);background:var(--vinyl);color:var(--paper);text-decoration:none;transition:transform .15s,border-color .15s}
.hbBtn:hover{transform:translateY(-3px);border-color:var(--gold)}
.hbBtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hbBtn img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.hbCap{display:flex;flex-direction:column;gap:4px;padding:12px 16px 16px}
.hbCap b{font-size:20px;letter-spacing:-.01em;color:var(--goldT)}
.hbCap span{font-size:15px;line-height:1.45;color:var(--muted)}
@media(min-width:861px){.hbCap{min-height:96px}}

.hbSoon{margin-top:30px;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:center;padding:16px;border-radius:16px;border:1px dashed rgba(var(--fgr),.2);background:rgba(var(--fgr),.03)}
.hbSoon img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px}
.hbSoon h2{margin:0 0 8px;font-size:24px;letter-spacing:-.02em}
.hbSoon p{margin:0 0 10px;line-height:1.55;font-size:16px}
.hbMore{display:flex;flex-wrap:wrap;gap:6px 18px}
.hbMore a{display:inline-flex;align-items:center;min-height:44px;color:var(--goldT);font-weight:700}
@media(max-width:640px){.hbSoon{grid-template-columns:minmax(0,1fr)}}
.hbPage .foot{max-width:1136px;margin:30px auto 0;padding:0 22px;box-sizing:border-box}
.hbPage .foot a{color:var(--goldT)}
@media(max-width:600px){.hb{padding:12px 16px 16px}.hbHeroImg{border-radius:12px}.hbPage .foot{padding:0 16px}}
@media (pointer:coarse){.hbPage .pHome{min-width:44px;min-height:44px}}