/* ============ MATCHESS ============ */
html.mmx-open,html.mmx-open body{overflow:hidden}
.mmx[hidden]{display:none}
.mmx{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;color:#f1f1f4;background:radial-gradient(75% 55% at 12% -8%,rgba(255,38,38,.24),transparent 62%),radial-gradient(60% 45% at 100% 0,rgba(255,255,255,.07),transparent 58%),#0b0b0f;font-family:var(--mm-font-body,system-ui,-apple-system,"Segoe UI",sans-serif);--mmx-red:#ff2d2d;--mmx-red2:#b30000;--mmx-line:rgba(255,255,255,.12);--mmx-soft:rgba(255,255,255,.055);--mmx-muted:#a4a4ae}
.mmx::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.mmx *{box-sizing:border-box}
.mmx button{font:inherit;color:inherit}

/* top bar */
.mmx-bar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--mmx-line);background:rgba(8,8,11,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mmx-brand{display:flex;align-items:center;gap:11px;min-width:0;margin-right:auto}
.mmx-knight{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:1.7rem;line-height:1;color:#fff;background:linear-gradient(135deg,var(--mmx-red),var(--mmx-red2));box-shadow:0 8px 20px rgba(255,45,45,.3);font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif;font-variant-emoji:text}
.mmx-brand strong{display:block;font-family:var(--mm-font-display,inherit);font-weight:400;font-size:1.12rem;letter-spacing:.1em;line-height:1.1}
.mmx-brand small{display:block;color:var(--mmx-muted);font-size:.72rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmx-stat{display:flex;gap:8px;align-items:stretch}
.mmx-stat .chip{display:flex;flex-direction:column;justify-content:center;padding:5px 11px;border-radius:11px;background:var(--mmx-soft);border:1px solid var(--mmx-line);min-width:60px}
.mmx-stat .chip small{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mmx-muted)}
.mmx-stat .chip b{font-size:.98rem;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.mmx-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--mmx-line);border-radius:11px;background:var(--mmx-soft);cursor:pointer;transition:background .15s,border-color .15s}
.mmx-ic:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}

/* layout */
.mmx-scroll{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
.mmx-layout{max-width:820px;margin:0 auto;padding:18px 18px 40px}
.mmx-right{min-width:0}

/* cards & text */
.mmx-card{padding:22px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid var(--mmx-line);box-shadow:0 20px 50px rgba(0,0,0,.35);animation:mmxRise .5s cubic-bezier(.2,.8,.2,1) both}
.mmx-card.shake{animation:mmxShake .42s}
@keyframes mmxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mmxShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.mmx-kick{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--mmx-red),var(--mmx-red2))}
.mmx-card h2{margin:12px 0 8px;font-family:var(--mm-font-display,inherit);font-weight:400;font-size:clamp(1.9rem,5vw,2.8rem);letter-spacing:.06em;line-height:1.05;text-transform:uppercase}
.mmx-card h2 span{color:var(--mmx-red)}
.mmx-card .lead{margin:0 0 14px;font-size:1.02rem;line-height:1.6;color:#e5e5ea}
.rules{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:9px}
.rules li{position:relative;padding:10px 12px 10px 38px;border-radius:12px;background:var(--mmx-soft);border:1px solid var(--mmx-line);font-size:.94rem;line-height:1.5;color:#d9d9e0}
.rules li::before{content:"\2022";position:absolute;left:15px;top:6px;color:var(--mmx-red);font-size:1.4rem}
.rules b{color:#fff}
.mmx-facts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.mmx-facts span{flex:1 1 90px;display:flex;flex-direction:column;align-items:center;padding:10px 8px;border-radius:12px;background:var(--mmx-soft);border:1px solid var(--mmx-line);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mmx-muted);text-align:center}
.mmx-facts b{font-family:var(--mm-font-display,inherit);font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:#fff;text-transform:none}
.note{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:rgba(255,213,52,.1);border:1px solid rgba(255,213,52,.35);color:#ffe9a0;font-size:.9rem}
.fine{margin:14px 0 0;color:var(--mmx-muted);font-size:.8rem;line-height:1.5}
.mmx-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mmx-btn{min-height:46px;padding:11px 20px;border-radius:13px;border:1px solid var(--mmx-line);background:var(--mmx-soft);cursor:pointer;font-weight:700;transition:transform .15s,box-shadow .15s,background .15s,opacity .15s}
.mmx-btn:hover{background:rgba(255,255,255,.12)}
.mmx-btn:active{transform:scale(.97)}
.mmx-btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--mmx-red),var(--mmx-red2));box-shadow:0 10px 26px rgba(255,45,45,.32)}
.mmx-btn.primary:hover{box-shadow:0 12px 30px rgba(255,45,45,.45);transform:translateY(-1px)}
.mmx-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* problem */
.mmx-lock{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--mmx-line)}
.mmx-lock .lk{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--mmx-soft);border:1px solid var(--mmx-line);font-size:1.25rem}
.mmx-lock small{display:block;color:var(--mmx-muted);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.mmx-lock strong{font-family:var(--mm-font-body,inherit);font-weight:800;font-size:1.4rem;letter-spacing:.01em}
.mmx-diff{margin-left:auto;padding:4px 11px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.14em;color:#fff;background:linear-gradient(135deg,#ff2d2d,#7a0000);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.mmx-chap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;color:#ffb3b3;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mmx-chap .tries{color:var(--mmx-muted);font-weight:600;text-transform:none;letter-spacing:0}
.mmx-q{font-family:Cambria,"Cambria Math","STIX Two Text",Georgia,serif;font-size:1.12rem;line-height:1.7;margin-bottom:14px;overflow-wrap:anywhere}
.mmx-q p{margin:.2rem 0 .7rem}
.mmx-q mjx-container,.mmx-sol mjx-container,.mmx-review mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}
.mmx-opts{display:grid;gap:10px}
.mmx-opt{display:flex;align-items:center;gap:13px;width:100%;min-height:54px;padding:10px 14px;text-align:left;border-radius:14px;border:1.5px solid var(--mmx-line);background:rgba(0,0,0,.28);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.mmx-opt>b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--mmx-soft);border:1px solid var(--mmx-line);font-size:.86rem}
.mmx-opt>span{flex:1;min-width:0;font-family:Cambria,"Cambria Math","STIX Two Text",Georgia,serif;font-size:1.06rem;overflow-x:auto;overflow-y:hidden}
.mmx-opt:hover:not(:disabled){border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.07)}
.mmx-opt.on{border-color:var(--mmx-red);background:rgba(255,45,45,.14);box-shadow:0 0 0 2px rgba(255,45,45,.3) inset}
.mmx-opt.on>b{background:var(--mmx-red);border-color:var(--mmx-red);color:#fff}
.mmx-opt.bad{opacity:.45;border-style:dashed;border-color:rgba(255,80,80,.55);cursor:not-allowed}
.mmx-opt.bad>span{text-decoration:line-through}
.mmx-opt.good{border-color:#3ddc84;background:rgba(61,220,132,.14);box-shadow:0 0 0 2px rgba(61,220,132,.3) inset;opacity:1}
.mmx-opt.good>b{background:#3ddc84;border-color:#3ddc84;color:#06210f}
.mmx-opt:disabled:not(.bad):not(.good){opacity:.5;cursor:default}
.mmx-msg{min-height:1.4em;margin-top:12px;font-size:.9rem;color:var(--mmx-muted)}
.mmx-msg.err{color:#ff8f8f;font-weight:700}
.mmx-sol{margin-top:16px;animation:mmxRise .45s both}
.mmx-sol .ok{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:12px;background:rgba(61,220,132,.13);border:1px solid rgba(61,220,132,.45);color:#9bf0c0;font-weight:800}
.mmx-sol .ok span{margin-left:auto;color:#fff;background:rgba(61,220,132,.3);padding:2px 10px;border-radius:99px;font-size:.84rem}
.solbody{margin-top:12px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--mmx-line);font-family:Cambria,"Cambria Math","STIX Two Text",Georgia,serif;font-size:1.02rem;line-height:1.7;overflow-wrap:anywhere}
.solbody h4{margin:0 0 6px;font-family:var(--mm-font-body,inherit);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mmx-muted)}
.solbody p{margin:.25rem 0 .6rem}
.mmx-played{margin-top:12px;display:grid;gap:7px}
.mmx-played .mv{padding:9px 12px;border-radius:12px;background:var(--mmx-soft);border:1px solid var(--mmx-line);font-size:.92rem;color:#d7d7de}
.mmx-played .mv b{color:#fff;margin-right:4px}
.mmx-played .mv span{color:var(--mmx-muted)}

/* end screens */
.mmx-rank{margin:0 0 16px;padding:16px;border-radius:16px;text-align:center;background:linear-gradient(135deg,rgba(255,45,45,.22),rgba(255,45,45,.06));border:1px solid rgba(255,90,90,.45)}
.mmx-rank small{display:block;color:var(--mmx-muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.mmx-rank strong{display:block;margin:4px 0;font-family:var(--mm-font-body,inherit);font-weight:800;font-size:1.8rem;letter-spacing:.01em}
.mmx-rank span{color:#e0e0e6;font-size:.92rem}
.mmx-end.lose .mmx-kick{background:linear-gradient(135deg,#555,#222)}
.mmx-review{margin-top:22px}
.mmx-review h4{margin:0 0 10px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mmx-muted)}
.mmx-review details{margin-bottom:8px;border-radius:12px;background:var(--mmx-soft);border:1px solid var(--mmx-line);overflow:hidden}
.mmx-review summary{padding:11px 14px;cursor:pointer;font-size:.92rem;list-style:none}
.mmx-review summary::-webkit-details-marker{display:none}
.mmx-review summary::before{content:"\25B8";display:inline-block;margin-right:9px;color:var(--mmx-red);transition:transform .15s}
.mmx-review details[open] summary::before{transform:rotate(90deg)}
.mmx-review .rq,.mmx-review .ra,.mmx-review .rs{padding:0 14px 12px;font-family:Cambria,"Cambria Math","STIX Two Text",Georgia,serif;line-height:1.65;overflow-wrap:anywhere}
.mmx-review .ra{color:#9bf0c0}.mmx-review .ra em{font-family:var(--mm-font-body,inherit);font-style:normal;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-right:6px;color:var(--mmx-muted)}
.mmx-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.mmx-conf i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation:mmxFall linear forwards}
@keyframes mmxFall{to{transform:translate(var(--dx),110vh) rotate(720deg);opacity:.9}}

/* tablets & phones */
@media(max-width:900px){
  .mmx-layout{padding:12px 12px 36px}
  .mmx-brand small{display:none}
  .mmx-card{padding:16px;border-radius:16px}
}
@media(max-width:560px){
  .mmx-bar{gap:8px;padding:8px 10px}
  .mmx-knight{width:34px;height:34px;font-size:1.4rem}
  .mmx-brand strong{font-size:.95rem;letter-spacing:.06em}
  .mmx-stat{gap:5px}
  .mmx-stat .chip{padding:4px 8px;min-width:0}
  .mmx-stat .chip b{font-size:.85rem}
  .mmx-ic{width:34px;height:34px}
  .mmx-q{font-size:1.03rem}
  .mmx-lock strong{font-size:1.15rem}
}
@media(max-width:560px){.mmx-brand>div{display:none}}
@media(max-width:400px){.mmx-stat .chip small{font-size:.54rem}}
@media(prefers-reduced-motion:reduce){.mmx *,.mmx *::before,.mmx *::after{animation:none!important;transition:none!important}}

/* single / multiple correct */
.mmx-type{padding:3px 10px;border-radius:999px;font-size:.64rem;font-weight:800;letter-spacing:.1em;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);white-space:nowrap}
.mmx-type.m{background:linear-gradient(135deg,#ff9a2d,#c25a00);border-color:transparent}
.mmx-opt.multi>b{border-radius:6px}
.mmx-opt.multi.on>b::after{content:"\2713";position:absolute;font-size:.9rem;line-height:1}
.mmx-opt.multi.on>b{position:relative;font-size:0}
.mmx-opt.multi.good>b{position:relative;font-size:0}
.mmx-opt.multi.good>b::after{content:"\2713";position:absolute;font-size:.95rem;line-height:1}
.mmx-opt>span{font-size:1.02rem;line-height:1.55}
.mmx-opt{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.mmx-opt>b{margin-top:1px}
.mmx-q ul,.solbody ul{margin:.3rem 0 .6rem;padding-left:1.15rem}
.mmx-q li,.solbody li{margin:.35rem 0}
.mmx-q{font-size:1.08rem}


/* hints */
.mmx-btn.hint{background:rgba(255,200,60,.13);border-color:rgba(255,200,60,.55);color:#ffe08a}
.mmx-btn.hint:hover:not(:disabled){background:rgba(255,200,60,.22)}
.mmx-btn.hint small{opacity:.85;font-weight:600}
.mmx-opt.hinted{border-color:#ffd24a;box-shadow:0 0 0 2px rgba(255,210,74,.35) inset}
.mmx-opt.hinted>span::after{content:"  \1F4A1"}
.mmx-msg.hint{color:#ffe08a;font-weight:700}

.mmx-end.win h2 span{background:linear-gradient(135deg,#fff0a8,#f5b301 60%,#c77a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.mmx-end.win .mmx-kick{background:linear-gradient(135deg,#f5b301,#b36b00);color:#2b1800}