/* Moonclutch V40 – homepage. The root is a size container, so columns adapt to the REAL main width (sidebar/chat open or closed). */
#app .mh-root{max-width:none!important;margin:0!important;container-type:inline-size;container-name:mhroot;width:100%}
.mh{--g:#E8B04B;--line:#2A2F38;--panel:#191D24;--tx:#F2F3F5;--mu:#949BA6;font-family:var(--mbs-font,'MoonInter',Inter,system-ui,sans-serif);color:var(--tx);display:flex;flex-direction:column;gap:30px;width:100%;min-width:0}
.mh a{color:inherit;text-decoration:none}
.mh svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* top: welcome + banner */
.mh-top{display:grid;grid-template-columns:minmax(270px,1fr) minmax(0,2.1fr);gap:16px;align-items:stretch;min-width:0}
.mh-welcome{position:relative;min-height:300px;height:100%;border:1px solid var(--line);border-radius:14px;background:radial-gradient(120% 90% at 100% 0,#1c2030 0,#13161d 60%);overflow:hidden;box-sizing:border-box;display:flex}
.mh-wcopy{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;padding:24px;width:62%;min-width:0;box-sizing:border-box}
.mh-welcome h1{margin:0;font:800 26px/1.15 var(--mbs-font);letter-spacing:-.4px;color:var(--g)}
.mh-welcome h1 span{color:var(--tx)}
.mh-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-sub{margin:0;color:var(--mu);font:500 13.5px/1.5 var(--mbs-font)}
.mh-prog{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.mh-prog-l{font:600 13px/1 var(--mbs-font);color:var(--mu)}
.mh-prog-r{display:flex;align-items:center;gap:8px}
.mh-lv{flex:none;min-width:30px;height:26px;padding:0 7px;border-radius:6px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font:800 13px/1 var(--mbs-font);font-variant-numeric:tabular-nums;border:1px solid}
.mh-lv[data-tier="1"]{color:#aeb7c6;background:#232833;border-color:#343b49}.mh-lv[data-tier="2"]{color:#7fd98f;background:#16291d;border-color:#27573a}.mh-lv[data-tier="3"]{color:#7fb0ff;background:#15233a;border-color:#284b80}.mh-lv[data-tier="4"]{color:#c59bff;background:#251a3b;border-color:#4b3580}.mh-lv[data-tier="5"]{color:#f0c46a;background:#33260f;border-color:#7a5a1e}
.mh-bar{flex:1;min-width:30px;height:6px;border-radius:3px;background:#262b35;overflow:hidden}
.mh-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#C98F2C,#f0c46a);transition:width .5s ease}
.mh-prog-d{font:600 11.5px/1 var(--mbs-font);color:var(--mu);font-variant-numeric:tabular-nums}
.mh-wbtns{display:flex;gap:8px;flex-wrap:wrap}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:8px;border:1px solid var(--line);background:#222731;color:var(--tx);font:800 12.5px/1 var(--mbs-font);letter-spacing:.05em;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}
.mh-btn:hover{background:#2b313d}
.mh-btn.gold{background:var(--g);border-color:var(--g);color:#16120a;align-self:flex-start;margin-top:auto}
.mh-btn.gold:hover{background:#f0bd62}
.mh-wbtns .mh-btn.gold{margin-top:0}
.mh-fig{position:absolute;right:-6px;bottom:0;top:0;width:52%;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;z-index:1}
.mh-fig svg{width:100%;height:92%;max-height:100%}

/* banner carousel */
.mh-banner{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:300px;background:#12151b;min-width:0}
.mh-track{display:flex;height:100%;min-height:300px;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.mh-slide{position:relative;flex:0 0 100%;min-width:0;display:flex;align-items:center;overflow:hidden}
.mh-slide.b1{background:linear-gradient(115deg,#241a0c 0,#14100b 55%,#1b1620 100%)}
.mh-slide.b2{background:linear-gradient(115deg,#1f2a1a 0,#11150f 55%,#1a1b24 100%)}
.mh-slide.b3{background:linear-gradient(115deg,#1b2036 0,#10131c 55%,#201a2c 100%)}
.mh-slide.b4{background:linear-gradient(115deg,#13262a 0,#0e1417 55%,#1d1b2b 100%)}
.mh-sl-art{position:absolute;right:0;top:0;bottom:0;width:46%;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.mh-sl-art svg{width:100%;height:100%}
.mh-sl-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding:30px 36px 44px;max-width:62%;box-sizing:border-box}
.mh-sl-copy small{font:800 11px/1 var(--mbs-font);letter-spacing:.14em;color:var(--g)}
.mh-sl-copy b{font:800 34px/1.05 var(--mbs-font);letter-spacing:-.8px;color:#fff;text-transform:uppercase}
.mh-sl-copy b em{font-style:normal;color:var(--g);display:block}
.mh-sl-copy>span{font:500 14px/1.5 var(--mbs-font);color:#c4cad4;max-width:380px}
.mh-sl-cta{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:800 12.5px/1 var(--mbs-font);font-style:normal;letter-spacing:.05em;color:var(--g);text-transform:uppercase}
.mh-sl-cta svg{width:16px;height:16px;transition:transform .2s}
.mh-slide:hover .mh-sl-cta svg{transform:translateX(3px)}
.mh-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(13,15,19,.6);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:3}
.mh-nav.prev{left:10px}.mh-nav.prev svg{transform:rotate(90deg)}.mh-nav.next{right:10px}.mh-nav.next svg{transform:rotate(-90deg)}
@media (hover:hover){.mh-banner:hover .mh-nav{display:inline-flex}.mh-nav:hover{background:rgba(13,15,19,.9)}}
.mh-dots{position:absolute;left:36px;bottom:16px;display:flex;gap:7px;z-index:3}
.mh-dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .25s,background .25s}
.mh-dots button.on{width:26px;background:var(--g)}
.mh-dots button:focus-visible,.mh-nav:focus-visible,.mh-card:focus-visible,.mh-btn:focus-visible,.mh-open:focus-visible,.mh-slide:focus-visible{outline:2px solid var(--mbs-ac,#8591C8);outline-offset:2px}

/* section headings */
.mh-sec{display:flex;flex-direction:column;gap:14px;min-width:0}
.mh-h{display:flex;align-items:center;gap:12px;margin:0;font:800 20px/1.1 var(--mbs-font);letter-spacing:-.2px;color:var(--tx);border:0!important;padding:0!important}
.mh-h svg.i{width:26px;height:26px;color:var(--g)}
.mh-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--mbs-font);color:var(--mu);letter-spacing:.04em}
.mh-all svg.i{width:15px;height:15px}.mh-all:hover{color:var(--tx)}

/* House Originals: column count follows the real container width */
.mh-games{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;min-width:0}
@container mhroot (max-width:879px){.mh-games{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container mhroot (max-width:779px){.mh-games{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mh-card{position:relative;display:block;aspect-ratio:3/4;min-height:0;border-radius:14px;overflow:hidden;background:#13161c;border:1px solid var(--line);box-shadow:inset 0 -3px 0 var(--g);isolation:isolate;transition:transform .2s,border-color .2s}
.mh-art{position:absolute;inset:0}
.mh-art svg{width:100%;height:100%;display:block}
.mh-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,0) 45%,rgba(10,11,14,.88) 100%);z-index:1;pointer-events:none}
.mh-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 8px 16px;text-align:center}
.mh-cap b{font:800 clamp(13px,1.7cqw,17px)/1.1 var(--mbs-font);color:#fff;letter-spacing:-.2px}
.mh-cap small{font:500 clamp(10.5px,1.25cqw,12px)/1.25 var(--mbs-font);color:#b3b9c4}
@media (hover:hover){.mh-card:hover{transform:translateY(-3px);border-color:#4a4330}.mh-card:hover .mh-art svg{transform:scale(1.04)}}
.mh-art svg{transition:transform .35s ease}

/* Battle Highlights rows */
.mh-rows{display:flex;flex-direction:column;gap:10px;min-width:0}
.mh-row{display:grid;grid-template-columns:minmax(190px,1.15fr) minmax(0,1.6fr) minmax(120px,.7fr) minmax(150px,.75fr);align-items:center;gap:18px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0;transition:border-color .15s}
.mh-row:hover{border-color:#3b4250}
.mh-r-who{display:flex;flex-direction:column;gap:9px;min-width:0}
.mh-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mh-mode{display:inline-flex;align-items:center;gap:6px;font:800 12.5px/1 var(--mbs-font);letter-spacing:.05em;color:#cfd4dd}
.mh-mode svg.i{width:16px;height:16px}
.mh-mode.v-jackpot,.mh-mode.v-jackpot_terminal{color:#6ea8ff}.mh-mode.v-terminal{color:#e5736b}.mh-mode.v-group{color:#7fd98f}
.mh-chip,.mh-fmt{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;background:#232833;color:#aeb7c6;font:700 10.5px/1 var(--mbs-font);letter-spacing:.04em}
.mh-chip{background:rgba(163,113,247,.15);color:#c59bff}
.mh-pls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mh-team{display:inline-flex;gap:3px;align-items:center}
.mh-team.lost{opacity:.45}
.mh-team.won .mh-pl{box-shadow:0 0 0 2px var(--g)}
.mh-pl{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:800 12px/1 var(--mbs-font);color:#fff;outline:2px solid transparent;outline-offset:-2px;box-sizing:border-box}
.mh-pl.empty{background:transparent;border:1.5px dashed #3b4250;color:#5d6573;outline:0}
.mh-pl.bot{background:#323846!important;color:#aeb7c6}
.mh-vs{font:800 10px/1 var(--mbs-font);color:#5d6573;padding:0 3px}
.mh-r-cases{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.mh-strip{display:flex;align-items:center;gap:6px;overflow:hidden;max-width:100%;padding:6px 8px;border-radius:8px;background:#12151b}
.mh-case{width:46px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.mh-case svg{width:100%;height:100%}
.mh-more{font:800 12px/1 var(--mbs-font);color:var(--mu);padding:0 6px}
.mh-rounds{font:700 11.5px/1 var(--mbs-font);color:var(--mu);letter-spacing:.03em}
.mh-r-val{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mh-r-val b{font:800 16px/1 var(--mbs-font);color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.mh-r-val small{font:700 10.5px/1 var(--mbs-font);color:var(--mu);letter-spacing:.07em}
.mh-r-act{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.mh-open{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border-radius:8px;background:#272c37;color:#e6e9ee;font:800 12.5px/1 var(--mbs-font);letter-spacing:.05em;white-space:nowrap;transition:background .15s}
.mh-open:hover{background:#323846}
.mh-row.open .mh-open{background:var(--g);color:#16120a}.mh-row.open .mh-open:hover{background:#f0bd62}
.mh-st{align-self:center;display:inline-flex;align-items:center;gap:6px;font:800 10.5px/1 var(--mbs-font);letter-spacing:.07em;color:var(--mu)}
.mh-st.open{color:#7fd98f}.mh-st.live{color:#e5736b}
.mh-st.live i{width:7px;height:7px;border-radius:50%;background:#e5534b;animation:mhpulse 1.4s infinite}
@keyframes mhpulse{50%{opacity:.35}}
.mh-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--mu);font:500 13px/1.4 var(--mbs-font)}
.mh-empty b{color:var(--tx);font-size:15px}.mh-empty .mh-btn{margin-top:8px;align-self:center}
.mh-skel{height:78px;border-radius:12px;background:linear-gradient(90deg,#181c23,#1e232b,#181c23);background-size:200% 100%;animation:mhsk 1.4s infinite linear}
@keyframes mhsk{to{background-position:-200% 0}}

/* container-driven adaptation (real main width, not viewport) */
@container mhroot (max-width:1000px){
  .mh-wcopy{width:100%;padding:20px}.mh-fig{opacity:.3;width:58%}
  .mh-welcome h1{font-size:23px}
  .mh-row{grid-template-columns:minmax(150px,1fr) minmax(0,1.25fr) minmax(104px,.6fr) minmax(130px,.7fr);gap:12px;padding:12px}
  .mh-sl-copy{max-width:70%;padding:26px 28px 40px}.mh-sl-copy b{font-size:28px}
}
@container mhroot (max-width:760px){
  .mh-top{grid-template-columns:minmax(0,1fr)}
  .mh-welcome,.mh-banner,.mh-track{min-height:260px}
  .mh-wcopy{width:62%}.mh-fig{opacity:1;width:52%}
  .mh-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(130px,.8fr)}
  .mh-r-act{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .mh-r-act .mh-open{flex:1;max-width:220px}
}
@container mhroot (max-width:700px){
  .mh-sl-copy{max-width:72%;padding:22px 24px 40px}.mh-sl-copy b{font-size:26px}
  .mh-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mh-r-cases{grid-column:1/-1;order:3}.mh-r-act{order:4}
}
@container mhroot (max-width:520px){
  .mh{gap:24px}
  .mh-wcopy{width:100%;padding:20px}.mh-fig{opacity:.28;width:70%}
  .mh-welcome h1{font-size:23px}
  .mh-sl-copy{max-width:100%;padding:20px 20px 40px}.mh-sl-art{width:70%;opacity:.4}.mh-sl-copy b{font-size:23px}.mh-dots{left:20px}
  .mh-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mh-games .mh-card:last-child:nth-child(odd){grid-column:1/-1}
  .mh-cap b{font-size:15px}.mh-cap small{font-size:11px}
  .mh-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
  .mh-r-val{align-items:flex-start;text-align:left}.mh-r-act{order:5}.mh-r-act .mh-open{max-width:none}
}
@media (prefers-reduced-motion:reduce){.mh-track,.mh-card,.mh-art svg,.mh-bar i{transition:none!important}.mh-st.live i,.mh-skel{animation:none!important}}