/* Matebook page (src/matebook.html, assets/matebook.js). Layout and the page's own pieces
   only: tiles, filter rail, detail panel and phone sheet. Components come from arceus.css. */

.mb-wrap{width:100%;max-width:1480px;margin:0 auto;padding:0 22px}
@media(max-width:600px){.mb-wrap{padding:0 16px}}
html.mb-lock{overflow:hidden}

/* ── head ─────────────────────────────────────────────────────────────── */
.mb-hero{position:relative;isolation:isolate;overflow:hidden;background:#0A0C12;padding:clamp(40px,6vw,84px) 0 clamp(36px,4.5vw,60px)}
.mb-hero__bg{position:absolute;inset:-4%;z-index:-3}
.mb-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;max-width:none;filter:saturate(1.1) brightness(.5) blur(3px);transform:scale(1.04)}
.mb-hero__shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(60% 70% at 78% 60%,rgba(254,214,84,.14),transparent 62%),
  linear-gradient(90deg,rgba(8,9,14,.94) 0%,rgba(8,9,14,.72) 40%,rgba(8,9,14,.2) 70%,rgba(8,9,14,.4) 100%),
  linear-gradient(180deg,rgba(8,9,14,.3),transparent 40%,var(--a-night) 100%)}
.mb-hero__inner{position:relative;z-index:2}
.mb-hero__copy{max-width:620px}
.mb-hero__copy>*{animation:mbIn .6s var(--a-ease) both}
.mb-hero__copy>*:nth-child(2){animation-delay:.07s}.mb-hero__copy>*:nth-child(3){animation-delay:.14s}.mb-hero__copy>*:nth-child(4){animation-delay:.21s}
@keyframes mbIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mb-hero__rule{width:auto;justify-content:flex-start}
.mb-hero__rule::before{display:none}
.mb-hero__rule::after{flex:0 0 72px}
.mb-hero__rule .a-label::before{display:none}
.mb-hero h1{margin:14px 0 12px;font-size:clamp(46px,6.6vw,92px)}
.mb-hero__lead{font-size:clamp(15.5px,1.3vw,18px);line-height:1.6;color:var(--a-soft);max-width:52ch}
.mb-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin-top:26px;border-radius:16px;
  background:var(--a-smoke);box-shadow:var(--a-rim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:max-content;max-width:100%}
.mb-fact{display:flex;flex-direction:column;gap:6px;padding:14px 22px}
.mb-fact+.mb-fact{box-shadow:inset 1px 0 0 var(--a-rule-2)}
.mb-fact .a-num{font-size:clamp(26px,2.6vw,36px)}
.mb-fact .a-label{font-size:10px;letter-spacing:.2em}
.mb-fact--caught .a-num{color:var(--a-gold-hi)}
.mb-cast{position:absolute;right:max(0px,calc((100vw - 1480px)/2));top:0;bottom:0;width:min(46%,640px);z-index:1;pointer-events:none}
.mb-cast__m{position:absolute;bottom:6%;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));animation:mbFloat 7s ease-in-out infinite}
.mb-cast__m--0{left:26%;width:44%;z-index:2;bottom:4%}
.mb-cast__m--1{left:2%;width:32%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) brightness(.8);animation-delay:-2.4s;bottom:12%}
.mb-cast__m--2{right:0;width:32%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) brightness(.8);animation-delay:-4.8s;bottom:14%}
.mb-cast__glow{position:absolute;left:10%;right:6%;bottom:2%;height:24%;border-radius:50%;background:radial-gradient(closest-side,rgba(254,214,84,.3),rgba(254,214,84,.06) 60%,transparent)}
@keyframes mbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){
  .mb-cast{width:62%;right:-14%;opacity:.35}
  .mb-facts{grid-template-columns:repeat(4,1fr);width:100%}
  .mb-fact{padding:12px 10px 12px 14px;gap:4px}
  .mb-fact .a-label{font-size:8.5px;letter-spacing:.14em;line-height:1.35}
}

/* ── layout: rail, grid, detail ───────────────────────────────────────── */
.mb-book{position:relative;padding:8px 0 clamp(48px,6vw,90px)}
.mb-layout{display:grid;grid-template-columns:224px minmax(0,1fr) 372px;gap:24px;align-items:start}
.mb-main{min-width:0}
.mb-layout{row-gap:0;grid-template-rows:auto 1fr}
.mb-tools{grid-column:2;grid-row:1}
.mb-rail{grid-column:1;grid-row:1 / span 2}
.mb-main{grid-column:2;grid-row:2}
.mb-detail{grid-column:3;grid-row:1 / span 2}
@media(max-width:1279px){
  .mb-layout{grid-template-columns:minmax(0,1fr) 352px;grid-template-rows:auto auto 1fr;column-gap:20px}
  .mb-tools{grid-column:1;grid-row:1}.mb-rail{grid-column:1;grid-row:2;margin-bottom:14px}.mb-main{grid-column:1;grid-row:3}
  .mb-detail{grid-column:2;grid-row:1 / span 3}
}
@media(max-width:1023px){.mb-layout{grid-template-columns:minmax(0,1fr)}.mb-tools,.mb-rail,.mb-main{grid-column:1}}

/* the rail */
.mb-rail{position:sticky;top:88px;border-radius:var(--a-r-lg);background:var(--a-smoke);box-shadow:var(--a-rim),var(--a-shadow);overflow:hidden}
.mb-rail__head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--a-cream);color:var(--a-ink);
  font-family:var(--a-display);font-size:20px;line-height:1.1}
.mb-reset{font:800 11px/1 var(--a-body);letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink-2);padding:6px 10px;border-radius:var(--a-r-pill);
  box-shadow:inset 0 0 0 1px rgba(31,36,48,.25);transition:background var(--a-dur) var(--a-ease)}
.mb-reset:hover{background:rgba(31,36,48,.08)}
.mb-rail__body{padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 150px);overflow:auto;scrollbar-width:thin}
.mb-group{display:flex;flex-direction:column;gap:3px}
.mb-group__lab{font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--a-gold);padding:4px 10px 3px}
.mb-opt{--c:var(--a-gold);position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:4px 12px 4px 26px;border-radius:9px;
  color:var(--a-soft);font-weight:700;font-size:14px;text-align:left;
  transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-ease)}
.mb-opt::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--a-grad-gold);transform:rotate(45deg) scale(0);transition:transform var(--a-dur) var(--a-back)}
.mb-opt:hover{background:var(--a-band-hi);color:var(--a-cream)}
.mb-opt[aria-pressed="true"]{background:var(--a-cream);color:var(--a-ink);transform:translateX(3px)}
.mb-opt[aria-pressed="true"]::before{transform:rotate(45deg) scale(1)}
.mb-opt__k{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.mb-opt__k small{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim);margin-top:2px}
.mb-opt[aria-pressed="true"] .mb-opt__k small{color:var(--a-ink-2)}
.mb-opt__n{font-size:11.5px;font-weight:800;color:var(--a-dim);font-variant-numeric:tabular-nums}
.mb-opt[aria-pressed="true"] .mb-opt__n{color:var(--a-ink-2)}
.mb-opt__ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:#16131c;flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.mb-opt__ic svg{width:14px;height:14px}
.mb-opt--el[style*="shadow"] .mb-opt__ic{color:#EDE6FF}
.mb-opt.is-zero{opacity:.45}
.mb-opt__pip{width:10px;height:10px;background:var(--c);transform:rotate(45deg);margin:0 6px 0 5px;box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}

/* rail as chip rows (tablet and phone) */
@media(max-width:1279px){
  .mb-rail{position:relative;top:auto;background:transparent;box-shadow:none;overflow:visible;border-radius:0}
  .mb-rail__head{display:none}
  .mb-rail__body{padding:0;max-height:none;overflow:visible;gap:8px}
  .mb-group{flex-direction:row;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -22px;padding:2px 22px 4px;scroll-padding:0 22px}
  .mb-group::-webkit-scrollbar{display:none}
  .mb-group__lab{flex:0 0 auto;padding:0 6px 0 0;min-width:78px}
  .mb-opt{flex:0 0 auto;width:auto;min-height:36px;padding:0 13px 0 10px;border-radius:var(--a-r-pill);background:var(--a-band);box-shadow:var(--a-rim);
    font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;gap:7px}
  .mb-opt::before{display:none}
  .mb-opt[aria-pressed="true"]{transform:none}
  .mb-opt__k{flex-direction:row;align-items:center}
  .mb-opt__k small{display:none}
  .mb-opt__n{font-size:10.5px;opacity:.8}
  .mb-opt__ic{width:20px;height:20px;box-shadow:none}
  .mb-opt__ic svg{width:13px;height:13px}
  .mb-opt__pip{margin:0 2px 0 3px;width:8px;height:8px}
}
@media(max-width:600px){.mb-group{margin:0 -16px;padding:2px 16px 4px}.mb-group__lab{display:none}}

/* ── tools: search and sort ───────────────────────────────────────────── */
.mb-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:12px}
@media(max-width:1279px){.mb-tools{margin-top:16px;margin-bottom:14px}}
.mb-search{position:relative;flex:1 1 260px;display:flex;align-items:center;height:48px;border-radius:var(--a-r-pill);background:var(--a-smoke);
  box-shadow:var(--a-rim);transition:box-shadow var(--a-dur) var(--a-ease),background var(--a-dur) var(--a-ease)}
.mb-search:focus-within{background:var(--a-band-hi);box-shadow:inset 0 0 0 1px rgba(254,214,84,.7),0 0 0 4px rgba(231,182,74,.14)}
.mb-search svg{position:absolute;left:18px;width:18px;height:18px;color:var(--a-gold)}
.mb-search input{width:100%;height:100%;padding:0 52px 0 48px;border:0;background:transparent;color:var(--a-cream);font:600 15.5px var(--a-body);outline:none}
.mb-search input::placeholder{color:var(--a-dim)}
.mb-search input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.mb-search__key{position:absolute;right:10px;min-width:26px;height:26px;font-size:12px}
.mb-search:focus-within .mb-search__key{opacity:0}
@media(pointer:coarse),(max-width:600px){.mb-search__key{display:none}}
.mb-sort{display:inline-flex;gap:3px;padding:4px;border-radius:var(--a-r-pill);background:var(--a-smoke);box-shadow:var(--a-rim);max-width:100%;overflow-x:auto;scrollbar-width:none}
.mb-sort button{height:40px;padding:0 16px;border-radius:var(--a-r-pill);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-soft);white-space:nowrap;
  transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease)}
.mb-sort button:hover{color:var(--a-cream)}
.mb-sort button[aria-pressed="true"]{background:var(--a-cream);color:var(--a-ink)}
@media(max-width:600px){.mb-sort{width:100%;justify-content:space-between}.mb-sort button{flex:1 1 0;padding:0 8px}}
.mb-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:4px 2px 18px}
.mb-note{flex:1 1 320px;font-size:13.5px;color:var(--a-soft);font-style:italic;animation:aFadeUp var(--a-dur) var(--a-ease)}

/* ── the grid of tiles ────────────────────────────────────────────────── */
.mb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1279px){.mb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1023px){.mb-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:600px){.mb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.mb-ghost{aspect-ratio:3/4;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:aSkel 1.3s linear infinite}
.mb-grid.is-anim .mb-cell{animation:mbTile .42s var(--a-ease) both;animation-delay:calc(var(--i) * 18ms)}
@keyframes mbTile{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

.mb-tile{--c:var(--el-nature);--c2:var(--c);position:relative;display:flex;flex-direction:column;align-items:center;height:100%;
  padding:10px 10px 12px;border-radius:16px;text-decoration:none;color:var(--a-text);isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,rgba(34,36,48,.92),rgba(16,17,25,.95));box-shadow:var(--a-rim),0 10px 22px rgba(0,0,0,.3);
  transition:transform var(--a-dur) var(--a-ease),background var(--a-dur) var(--a-ease),box-shadow var(--a-dur) var(--a-ease)}
.mb-tile::before{/* element glow behind the art */content:"";position:absolute;left:50%;top:44%;width:82%;aspect-ratio:1;border-radius:50%;z-index:-1;
  transform:translate(-50%,-50%);opacity:.55;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 60%,transparent) 0%,color-mix(in srgb,var(--c2) 26%,transparent) 55%,transparent 72%);
  transition:opacity var(--a-dur) var(--a-ease),transform var(--a-slow) var(--a-back)}
.mb-tile:hover{transform:translateY(-4px);background:linear-gradient(180deg,rgba(44,46,60,.95),rgba(20,21,30,.96))}
.mb-tile:hover::before{opacity:.8;transform:translate(-50%,-50%) scale(1.08)}
.mb-tile:focus-visible{outline:none}
.mb-tile__no{align-self:flex-start;font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--a-dim);font-variant-numeric:tabular-nums;line-height:22px}
.mb-tile__els{position:absolute;right:8px;top:8px;display:flex;gap:2px}
.mb-tile__els .a-el--icon{width:22px;height:22px;padding:0 2px}
.mb-tile__els .a-el svg{width:17px;height:17px;padding:2.5px}
.mb-tile__art{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;margin:2px 0 6px}
.mb-tile__art img{position:absolute;left:4%;top:4%;width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));transition:transform var(--a-slow) var(--a-back)}
.mb-tile__art img.is-icon{left:13%;top:13%;width:74%;height:74%}
.mb-tile:hover .mb-tile__art img{transform:translateY(-4px) scale(1.05)}
.mb-tile__name{font-family:var(--a-display);font-size:clamp(15px,1.25vw,18px);line-height:1.05;color:var(--a-cream);text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-tile__rar{display:flex;gap:4px;margin-top:7px}
.mb-tile__rar i{width:6px;height:6px;transform:rotate(45deg);background:rgba(255,255,255,.14)}
.mb-tile__rar i.on{background:var(--rc);box-shadow:0 0 6px color-mix(in srgb,var(--rc) 70%,transparent)}
.mb-tile__got{position:absolute;left:8px;bottom:10px;width:0;height:0}
.mb-tile.is-caught .mb-tile__got{width:18px;height:18px;border-radius:50%;background:var(--a-grad-gold);box-shadow:0 0 0 2px rgba(10,10,16,.7)}
.mb-tile.is-caught .mb-tile__got::after{content:"";position:absolute;left:6px;top:3.5px;width:5px;height:8px;border:solid #2B1E05;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mb-tile__marker{position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--a-grad-gold);transform:rotate(45deg) scale(0);
  transition:transform var(--a-dur) var(--a-back)}
/* the chosen tile: cream with dark ink and the gold diamond, like the game */
.mb-tile.is-sel{background:linear-gradient(180deg,#FBF6E8,#EFE4C8);color:var(--a-ink);transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--a-gold),0 16px 34px rgba(0,0,0,.45),0 0 0 7px rgba(231,182,74,.16)}
.mb-tile.is-sel::before{opacity:.9}
.mb-tile.is-sel .mb-tile__name{color:var(--a-ink)}
.mb-tile.is-sel .mb-tile__no{color:var(--a-ink-2)}
.mb-tile.is-sel .mb-tile__rar i:not(.on){background:rgba(31,36,48,.18)}
.mb-tile.is-sel .mb-tile__marker{transform:rotate(45deg) scale(1);bottom:auto;top:13px;width:9px;height:9px;margin-left:-4.5px}
.mb-tile.is-sel .mb-tile__art img{transform:scale(1.07)}
.mb-tile.is-sel:focus-visible{box-shadow:0 0 0 3px var(--a-gold-hi),0 16px 34px rgba(0,0,0,.45),0 0 0 8px rgba(254,214,84,.28)}
.mb-mono{display:grid;place-items:center;width:62%;aspect-ratio:1;border-radius:50%;font-family:var(--a-display);font-size:40px;color:var(--a-cream);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c,#888) 55%,#222),#15161E);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.mb-mono--big{width:52%;font-size:88px}

.mb-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 20px;text-align:center;border-radius:var(--a-r-lg);background:var(--a-smoke);box-shadow:var(--a-rim)}
.mb-empty[hidden]{display:none}
.mb-empty p{color:var(--a-soft);font-size:16px}
.mb-keys{display:none;gap:22px;margin-top:22px;padding:12px 16px;border-radius:14px;background:var(--a-smoke);box-shadow:var(--a-rim);width:max-content}
@media(pointer:fine) and (min-width:1024px){.mb-keys{display:flex}}

/* ── detail panel ─────────────────────────────────────────────────────── */
.mb-detail{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto;border-radius:var(--a-r-lg);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
  background:var(--a-smoke);box-shadow:var(--a-rim),var(--a-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);outline:none}
.mbd{--c:var(--el-nature);--c2:var(--c);position:relative}
.mbd--wait{padding:26px}
.mbd__head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 20px;
  background:var(--a-cream);color:var(--a-ink)}
.mbd__no{font-family:var(--a-display);font-size:20px;line-height:1}
.mbd__nav{display:flex;gap:6px}
.mbd__arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--a-ink);background:rgba(31,36,48,.08);
  transition:background var(--a-dur) var(--a-ease),transform var(--a-fast) var(--a-ease)}
.mbd__arrow:hover{background:var(--a-ink);color:var(--a-cream)}
.mbd__arrow:active{transform:scale(.92)}
.mbd__arrow[disabled]{opacity:.3;pointer-events:none}
.mbd__arrow svg{width:16px;height:16px}
.mbd__close{display:none}
.mbd__stage{position:relative;display:grid;place-items:center;height:260px;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 100%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%)}
.mbd__stage::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--a-gold) 50%,transparent);opacity:.5}
.mbd__ring{position:absolute;left:50%;top:54%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 70%,#fff 10%) 0%,color-mix(in srgb,var(--c) 38%,#111) 58%,color-mix(in srgb,var(--c2) 45%,#0b0b12) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 0 8px rgba(10,10,16,.5),0 0 60px color-mix(in srgb,var(--c) 35%,transparent);animation:mbPop .36s var(--a-back) both}
.mbd__art{position:relative;z-index:1;width:auto;height:240px;max-width:88%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));animation:mbArt .42s var(--a-back) both}
.mbd__art.is-icon{height:170px}
@keyframes mbPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes mbArt{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
.mbd__got{position:absolute;left:14px;bottom:14px;z-index:2;padding:5px 10px 5px 8px;border-radius:var(--a-r-pill);background:var(--a-grad-gold);color:#2B1E05;
  font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.mbd__body{padding:16px 20px 20px}
.mbd__body>*{animation:aFadeUp var(--a-slow) var(--a-ease) both}
.mbd__body>*:nth-child(2){animation-delay:30ms}.mbd__body>*:nth-child(3){animation-delay:60ms}.mbd__body>*:nth-child(4){animation-delay:90ms}
.mbd__body>*:nth-child(5){animation-delay:120ms}.mbd__body>*:nth-child(6){animation-delay:150ms}.mbd__body>*:nth-child(n+7){animation-delay:180ms}
.mbd__name{font-family:var(--a-display);font-weight:400;font-size:36px;line-height:1;color:var(--a-cream);text-transform:none}
.mbd__line{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--a-dim)}
.mbd__badges{margin-top:12px}
.mbd__desc{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--a-soft)}
.mbd__sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--a-rule-2)}
.mbd__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mbd__h .a-label{font-size:11px}
.mbd__total{font-size:12px;font-weight:700;color:var(--a-dim);letter-spacing:.06em}
.mbd__total b{font-family:var(--a-display);font-weight:400;font-size:18px;color:var(--a-gold-hi);margin-left:4px}
.mbd .a-stat{grid-template-columns:96px 1fr 34px;gap:10px}
.mbd .a-stat__k{font-size:10px;letter-spacing:.14em}
.mbd .a-stat__v{font-size:16px}
.mbd .a-stats{gap:8px}
.mbd-chips{display:flex;flex-wrap:wrap;gap:6px}
.mbd-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--a-r-pill);background:var(--a-band);box-shadow:var(--a-rim);
  font-weight:700;font-size:12.5px;color:var(--a-cream)}
.mbd-chip svg{width:14px;height:14px}
.mbd-chip--soft{color:var(--a-dim)}
.mbd-chip--gold{background:rgba(231,182,74,.14);box-shadow:inset 0 0 0 1px rgba(231,182,74,.5);color:var(--a-gold-hi)}
.mbd-chip--night{background:rgba(91,62,158,.3);box-shadow:inset 0 0 0 1px rgba(160,130,240,.5);color:#E3D8FF}
.mbd-chip--rain{background:rgba(90,184,255,.16);box-shadow:inset 0 0 0 1px rgba(90,184,255,.5);color:#CFE9FF}
.mbd-fine{font-size:13.5px;color:var(--a-dim)}
.mbd-chain{display:flex;align-items:stretch;gap:4px}
.mbd-chain__m{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;background:var(--a-band);box-shadow:var(--a-rim);
  font-family:var(--a-display);font-size:13.5px;color:var(--a-cream);transition:background var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-ease)}
.mbd-chain__m span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbd-chain__m img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.mbd-chain__m .mb-mono{width:58px;font-size:24px}
.mbd-chain__m:hover{background:var(--a-band-hi);transform:translateY(-2px)}
.mbd-chain__m.is-on{background:var(--a-cream);color:var(--a-ink);box-shadow:0 0 0 1px var(--a-gold)}
.mbd-chain__gate{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--a-dim);text-align:center}
.mbd-chain__gate b{font-family:var(--a-display);font-weight:400;font-size:14px;letter-spacing:0;color:var(--a-gold-hi)}
.mbd-chain__gate span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mbd-orb{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 55%,color-mix(in srgb,var(--c) 50%,#000));box-shadow:0 0 6px var(--c)}
.mbd__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--a-rule-2)}
.mbd__acts .btn{flex:1 1 auto}
.mbd__mark{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:var(--a-r-pill);background:var(--a-band);box-shadow:var(--a-rim);
  font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-soft);transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease)}
.mbd__mark .a-diamond{width:8px;height:8px;opacity:.35;box-shadow:none;transition:opacity var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-back)}
.mbd__mark:hover{background:var(--a-band-hi);color:var(--a-cream)}
.mbd__mark[aria-pressed="true"]{background:var(--a-cream);color:var(--a-ink)}
.mbd__mark[aria-pressed="true"] .a-diamond{opacity:1;transform:rotate(45deg) scale(1.2)}

/* the phone and tablet sheet */
.mb-scrim{position:fixed;inset:0;z-index:95;background:rgba(5,6,10,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--a-slow) var(--a-ease)}
.mb-scrim.is-on{opacity:1}
@media(max-width:1023px){
  .mb-detail{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:96;max-height:min(88vh,860px);border-radius:22px 22px 0 0;
    background:rgba(14,15,22,.97);transform:translateY(104%);visibility:hidden;
    transition:transform .32s var(--a-ease),visibility 0s linear .32s;padding-bottom:env(safe-area-inset-bottom)}
  .mb-detail.is-open{transform:none;visibility:visible;transition:transform .32s var(--a-ease),visibility 0s}
  .mbd__head{border-radius:22px 22px 0 0}
  .mbd__head::before{content:"";position:absolute;left:50%;top:5px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(31,36,48,.25)}
  .mbd__close{display:grid}
  .mbd__stage{height:230px}
  .mbd__art{height:210px}
}

/* ── cta ──────────────────────────────────────────────────────────────── */
.mb-cta{background:radial-gradient(60% 80% at 50% 100%,rgba(231,182,74,.12),transparent 70%)}
.mb-cta__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

@media (prefers-reduced-motion:reduce){
  .mb-hero__copy>*,.mb-cast__m,.mb-grid.is-anim .mb-cell,.mbd__ring,.mbd__art,.mbd__body>*,.mb-ghost{animation:none}
  .mb-tile,.mb-tile__art img,.mb-opt,.mb-detail,.mb-scrim{transition:none}
}